让你的CSS更尽完美的技巧

Posted 2021-04-09 前端程序猿社区

CSS要学会并不是一件难事，但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕，如果你遵循一定的方法，还是很容易写出一个较好的CSS，也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧，希望能帮助大家写出一个更好的CSS样式。

一、不要使用全局复位样式

使用全局复位样式来删除所有html元素的默认的“margin”和“padding”是非常不好的一种做法。他不仅缓慢和效率低，但你在项目中必须重置这些参数。就像Eric Meyer重置样式。

不好的方式：

		*{ margin:0; padding:0; }  
	

建议的方式：

		body,ul,ol,dl,dd,dir,h1,h2,h3,h4,h5,h6,p,pre,blockquote,hr,figure{
      margin:0;
      padding:0;
		}
	

扩展阅读：

1. CSS Tools: Reset CSS

2. YUI 2: Reset CSS

3. CSS reset

4. Popular ‘CSS Reset’ Stylesheet Gets an HTML5 Makeover

5. CSS Mini Reset

二、不要使用IE HACK

IE Hack可能有时候作用是蛮大的，紧急时候能帮你解决大问题。我也在《浏览器兼容之旅的第二站:各浏览器的Hack写法》中整理了一份所有浏览器的Hack写法，但我更多次强调尽量不要使用IE Hack，就算你在IE下需要特殊写一个样式，我强烈建议您使用条件样式来写：

不好的方式：

		.eml {
			_postion: relative;
			_top: 10px;
		}
	

建议的方式：

		<!--[if lte IE 6]>
			<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />  
    <![endif]--> 
	

然后把样式写到ie-styles.css文件中：

		.eml {
			postion: relative;
			top: 10px;
		}
	

扩展阅读：

1. 浏览器兼容之旅的第一站:如何创建条件样式

2. Conditional comments

3. CSS Hacks

4. How To Create an IE-Only Stylesheet

5. About Conditional Comments

6. Conditional-CSS

7. Targeting IE Using Conditional Comments and Just One Stylesheet

三、使用有义的类名和ID名

假设你定的的侧边栏使用了“left-sidebar”类名，但你是设计重新布局，将原来的左边栏放置在右边栏，那么你定义的“left-sdiebar”将无任何意义。你应该把之前声明的类和ID名做一些思考，让他们在你的页面中更具有意义，更让人读懂：

不好的方式：

		<div class="box">
			<div class="leftBox">sidebar</div>
			<div class="mainBox">main content</div>
		</div>
	

建议的方式：

		<div class="container">
			<div class="aside">sidebar</div>
			<div class="content">main content</div>
		</div>
	

扩展阅读：

1. The Difference Between ID and Class

2. Object Oriented CSS (OOCSS) And Being Generic With Your Base CSS Classes

3. CSS Class and CSS ID

4. Best Practice for ID and Class Names

5. IDs and class names CSS

6. What are the best ways to name IDs and classes in CSS?

四、利用CSS继承关系

如果多个子元素的样式和具有相同的样式，应该使用继承关系来写样式，这是一个很不错的方法。它能使你更容易更新你的代码和管理你的代码，还将大大减少CSS文件大小。

不好的方式：

    #container li{ font-family:Georgia, serif; }  
    #container p{ font-family:Georgia, serif; }  
    #container h1{font-family:Georgia, serif; }  
	

建议的方式：

    #container{ font-family:Georgia, serif; }  
	

扩展阅读：

1. CSS Structure and Rules

2. Writing Efficient CSS for use in the Mozilla UI

3. CSS Inheritance

4. Inheritance

5. Inheritance and Cascading Styles in CSS Explained

五、群组选择器

如果你的样式，多个元素具有相同的样式，那么你可以使用群组选择器来写样式，这将大大的节省你的时间和空间。

不好的方式：

    h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
    h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
    h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
	

建议的方式：

    h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
	

扩展阅读：

1. Multiple Class / ID and Class Selectors

2. Class selectors

3. The 4 CSS Rules of Multiplicity

六、使用速记属性

CSS中有很多属性可以使用缩写法，比如“margin”、“padding”、“background”、“font”、“border”、“color”等。那么在你编写你的CSS属性时，碰到这些属性尽量使用其缩写，其一能快速编写你的CSS代码，其二能帮你减少你的样式大小。

不好的方式：

    li{
      font-family:Arial, Helvetica, sans-serif;  
      font-size: 1.2em;  
      line-height: 1.4em;  
      padding-top:5px;  
      padding-bottom:10px;  
      padding-left:5px;  
    }  
	

建议的方式：

    li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
	padding:5px 0 10px 5px; 
    } 
	

扩展阅读

1. Efficient CSS with shorthand properties

2. Useful CSS shorthand properties

3. Top 5 CSS Shorthand Properties

4. CSS Shorthand Guide

5. Introduction to CSS Shorthand

6. CSS Font Shorthand Property Cheat Sheet

7. Introduction to CSS shorthand properties

七、组织CSS代码

使用一定的模式来组织你的CSS代码，方便你在后期查找你需要的代码，比如说你要寻找一个特定的样式，这样将为您省下大量的时间找寻找他。下面展示的是一个组织CSS代码的示例：

		/*-------------------------
        CSS Reset
    -------------------------*/  
      
    /*-------------------------
        Generic Classes
    -------------------------*/  
      
    /*-------------------------
        Layout styles
    -------------------------*/  
      
    /*-------------------------
        Section specific styles
    -------------------------*/  
	

扩展阅读：

1. Organizing Your CSS Files

2. CSS – 5 Tips To Organize A Style Sheet

3. How to organize your css code: the ‘killer’ css structure

4. Beautiful CSS: Organizing Your Stylesheets

5. Best practices for JS and CSS organization

6. Organizing & Simplifying CSS

7. styleneat

八、增加CSS的可读性

写一个可读的CSS样式，使你更容易找到和更新一个样式。下面是两种不同的版本样式：

    		/*------------------------
    Each Style on new line
    ---------------------*/  
		div{
			background-color:#3399cc;  
			color:#666;  
			font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
			height:300px;  
			margin:10px 5px;  
			padding:5px 0 10px 5px;  
			width:30%;  
			z-index:10;  
		}  
			
		/*------------------------
				All Styles on one line
				---------------------*/  
		div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
	

扩展阅读

1. Readable CSS

2. Simple Rules To Make CSS More Readable

3. 5 Rules To Write More Readable CSS Files

4. Simple CSS: Creating More Readable Text

九、添加适当的注释

在CSS样式中使用适当的注释有多个好处，其一可以分开不同部分的代码；其二可以增加代码的可读性等：

      /*--------------------
        Header
 -----------------*/  
	#header{ height:145px; position:relative; }  
        #header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}  				
        /*--------------------
 Content
	-----------------*/  
        #content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}  
	#content .posts{ overflow:hidden; }  
	#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }  				
        /*--------------------
	Footer
	-----------------*/  
	#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}  
	#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }  

扩展阅读

1. How To Comment CSS

2. Adding Comments Within CSS

十、按CSS属性字母顺序排列

这个习惯可能没有几个人有，我刚到公司时，我的Boss就是这样要求我写CSS，要按属性的字母顺序来写，我当时就觉得那样写真是多此一举，蛋疼的事情。因为这样书写CSS样式真的好困难，但久而久之我也坚持下来了，后来发现这样写虽然麻烦，便也是蛮好的，它让我更容易寻找我需要的样式。

不好的方式：

    div{
      background-color:#3399cc;  
      width: 30%;  
    	color: #666;  
      margin: 10px 5px;  
    	font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
      height: 300px;  
      padding:5px 0 10px 5px;  
      z-index:10;  
    }  
	

建议的方式：

    div{
      background-color:#3399cc;  
      color: #666;  
      font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
      height: 300px;  
      margin: 10px 5px;  
      padding:5px 0 10px 5px;  
      width: 30%;  
      z-index:10;  
    }  
	

十一、使用外部样式表

样式写在单独的一个页面中，只能对当前页面有效果，为了更好的管理和更新你的样式，最好把你的样式单独的放在外部文件中，然后在使用“<link>”引用外部样式文件 。

不好的方式：

    <style type="text/css" >
      #container{ .. }
      #sidebar{ .. }
    </style>
  

或者写在行内

    
    <li style="font-family:Arial, helvetica, sans-serif; color:#666; " >...</li> 
	

建议的方式：

		<link rel="stylesheet" type="text/css" href="css/styles.css" />  
	

十二、分割成多个CSS文件

如果你在一个项目中有多个模块，而且每个模块都有不同的风格，此时你可以将你的CSS样式分割成多个文件，它们每一个文件对应你的一个模块，然后在创建一个样式文件，将这些文件导入到这个文件中。这样做能更好的在一个大项目中组织你的代码，而且意味着减少更多的HTTP请求和加载时间。

不好的方式：

		<link rel="stylesheet" type="text/css" href="css/reset.css" />  
		<link rel="stylesheet" type="text/css" href="css/typography.css" />  
		<link rel="stylesheet" type="text/css" href="css/layout.css" />  
	

建议的方式：

		<link rel="stylesheet" type="text/css" href="css/styles.css" />  
	

其中styles.css导入下面的样式文件：

    @import "style/css/reset.css";
    @import "style/css/typography.css";
    @import "style/css/layout.css";
	

扩展阅读

1. Best Bet CSS Practices

2. HTML5 ★ Boilerplate Docs

十三、压缩CSS代码

如果你的项目调试完成，只差上传到服务器上时，那么在上传你的文件之前，最好使用相关的压缩工具压缩你的CSS代码，以减少文件大小，提高网页的加载时间。

扩展阅读

1. 3 ways to compress CSS files using php

2. Free CSS Compressor and Free javascript Compressor

3. CSS的壓縮機和Minifier

4. CSS Drive CSS Compressor

5. Online JavaScript/CSS Compression Using YUI Compressor

6. Best way to compress javascript and css Make your code faster for free

7. css compressor

十四、编写一致的CSS

当你在同时开发多个Web项目中时，你应该尽量编写一些相同的CSS代码，让所有项目能使用到这样同的CSS代码，这样将减少你的工作量，提高你的开发效率。

原文: https://www.w3cplus.com/css/tips-to-write-better-css-code © w3cplus.com