高效编写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进制颜色值简写

CSS Code复制内容到剪贴板

/* Not recommended */  
color: #eebbcc;   
  
/* Recommended */  
color: #ebc;     

　　1.3.2 属性值简写

CSS Code复制内容到剪贴板

margin-top: 2px;   
 margin-right: 5px;   
 margin-bottom: 2em;   
 margin-left: 15px;     —–>>     margin: 2px 5px 2em 15px;    
  
 border-width: 1px;   
 border-style: solid;   
 border-color: #000     —–>>     border: 1px solid #000    
  
 font-style: italic;   
 font-variant: small-caps;   
 font-weight: bold;   
 font-size: 1em;   
 line-height: 140%;   
 font-family: sans-serif;  —–>>  font: italic small-caps bold 1em 140% sans-serief    
  
 background-color: #f00;   
 background-image: url(background.gif);   
 background-repeat: no-repeat;   
 background-attachment: fixed;   
 background-position: 0 0;   —–>>background: #f00 url(background.gif) no-repeat fixed 0 0    
  
 list-style-type: square;   
 list-style-position: inside;   
 list-style-image: url(image.gif)  —–>> list-style: square inside url(image.gif)