載入效能

css壓縮：將寫好的css進行打包壓縮，可以減小檔案體積。

css單一樣式：當需要下邊距和左邊距的時候，很多時候會選擇使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;執行效率會更高。

減少使用@import，建議使用link，因為後者在頁面載入時一起載入，前者是等待頁面載入完成之後再進行載入。

選擇器效能

• 關鍵選擇器（key selector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。

當使用後代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

• 如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。

• 避免使用通配規則，如*{}計算次數驚人，只對需要用到的元素進行選擇。

• 儘量少的去對標籤進行選擇，而是用class。

• 儘量少的去使用後代選擇器，降低選擇器的權重值。後代選擇器的開銷是最高的，儘量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標籤元素。

• 瞭解哪些屬性是可以通過繼承而來的，然後避免對這些屬性重複指定規則。

渲染效能

• 慎重使用高效能屬性：浮動、定位。

• 儘量減少頁面重排、重繪。

• 去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文件體積。

• 屬性值為0時，不加單位。

• 屬性值為浮動小數0.**，可以省略小數點之前的0。

• 標準化各種瀏覽器字首：帶瀏覽器字首的在前。標準屬性在後。

• 不使用@import字首，它會影響css的載入速度。

• 選擇器優化巢狀，儘量避免層級過深。

• css雪碧圖，同一頁面相近部分的小圖示，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用。

• 正確使用display的屬性，由於display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析效能。

• 不濫用web字型。對於中文網站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷效能。

可維護性、健壯性

將具有相同屬性的樣式抽離出來，整合並通過class在頁面中進行使用，提高css的可維護性。

樣式與內容分離：將css程式碼定義到外部css中。