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)