高效编写CSS代码的建议汇总

1. 基本原则

　　1.1 把CSS放在HTML页面头部

　　由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部。

　　@import 相当于把 标签放在页面的底部，因此从优化性能的角度考虑，应避免使用 @import。

　　1.2 避免使用 CSS Expressions

　　Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

　　1.3 CSS简写

　　1.3.1 16进制颜色值简写

1. /* Not recommended */  
2. color: #eebbcc;   
3.   
4. /* Recommended */  
5. color: #ebc;     

　　1.3.2 属性值简写

1. margin-top: 2px;   
2.  margin-right: 5px;   
3.  margin-bottom: 2em;   
4.  margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px;    
5.   
6.  border-width: 1px;   
7.  border-style: solid;   
8.  border-color: #000     ----->>     border: 1px solid #000    
9.   
10.  font-style: italic;   
11.  font-variant: small-caps;   
12.  font-weight: bold;   
13.  font-size: 1em;   
14.  line-height: 140%;   
15.  font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief    
16.   
17.  background-color: #f00;   
18.  background-image: url(background.gif);   
19.  background-repeat: no-repeat;   
20.  background-attachment: fixed;   
21.  background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0    
22.   
23.  list-style-type: square;   
24.  list-style-position: inside;   
25.  list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)   

　　1.4 尽量抽取相似部分

1. .class1{position: absolute; left: 20px; top: 30px;}   
2. .class2{position: absolute; left: 20px; top: 30px;}   
3. .class3{position: