編寫更好的CSS代碼

編寫好的CSS代碼，有助提升頁面的渲染速度。本質上，引擎需要解析的CSS規則越少，性能越好。MDN上将CSS選擇符歸類成四個主要類别，如下所示，性能依次降低。

1. ID 規則
2. Class 規則
3. 标簽規則
4. 通用規則

對效率的普遍認識是從Steve Souders在2009年出版的《高性能網站建設進階指南》開始，雖然該書中羅列的更加詳細，但你也可以在這裡檢視完整的引用清單，也可以在谷歌的《高效CSS選擇器的最佳實踐》中檢視更多的細節。

本文我想分享一些我在編寫高性能CSS中用到的簡單例子和指南。這些都是受到MDN 編寫的高效CSS指南的啟發，并遵循類似的格式。

避免過度限制

一條普遍規則，不要添加不必要的限制。

1 2 3 4 5 6 7

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}

後代選擇符最爛

不僅性能低下而且代碼很脆弱，html代碼和css代碼嚴重耦合，html代碼結構發生變化時，CSS也得修改，這是多麼糟糕，特别是在大公司裡，寫html和css的往往不是同一個人。

// 爛透了 html div tr td {..}

避免鍊式（交集）選擇符

這和過度限制的情況類似，更明智的做法是簡單的建立一個新的CSS類選擇符。

// 糟糕 .menu. left . icon {..} // 好的 .menu-left- icon {..}

堅持KISS原則

想象我們有如下的DOM：

< ul id = "navigator" > < li >< a href = "#" class = "twitter" >Twitter</ a ></ li > < li >< a href = "#" class = "facebook" >Facebook</ a ></ li > < li >< a href = "#" class = "dribble" >Dribbble</ a ></ li > </ ul >

下面是對應的規則……

// 糟糕 #navigator li a {..} // 好的 #navigator {..}

使用複合（緊湊）文法

盡可能使用複合文法。

8 9 10 11 12 13 14 15 16 17

// 糟糕 .someclass { padding-top : 20px ; padding-bottom : 20px ; padding-left : 10px ; padding-right : 10px ; background : #000 ; background-p_w_picpath : url (../imgs/carrot.png); background-position : bottom ; background-repeat : repeat-x ; } // 好的 .someclass { padding : 20px 10px 20px 10px ; background : #000 url (../imgs/carrot.png) repeat-x bottom ; }

避免不必要的命名空間

// 糟糕 .someclass table tr.otherclass td.somerule {..} //好的 .someclass .otherclass td.somerule {..}

避免不必要的重複

盡可能組合重複的規則。

18 19 20 21

// 糟糕 .someclass { color : red ; background : blue ; font-size : 15px ; } .otherclass { color : red ; background : blue ; font-size : 15px ; } // 好的 .someclass, .otherclass { color : red ; background : blue ; font-size : 15px ; }

盡可能精簡規則

在上面規則的基礎上，你可以進一步合并不同類裡的重複的規則。

22 23 24 25 26 27 28 29 30 31 32

// 糟糕 .someclass { color : red ; background : blue ; height : 150px ; width : 150px ; font-size : 16px ; } .otherclass { color : red ; background : blue ; height : 150px ; width : 150px ; font-size : 8px ; } // 好的 .someclass, .otherclass { color : red ; background : blue ; height : 150px ; width : 150px ; } .someclass { font-size : 16px ; } .otherclass { font-size : 8px ; }

避免不明确的命名約定

最好使用表示語義的名字。一個好的CSS類名應描述它是什麼而不是它像什麼。

避免 !importants

其實你應該也可以使用其他優質的選擇器。

遵循一個标準的聲明順序

雖然有一些排列CSS屬性順序常見的方式，下面是我遵循的一種流行方式。

.someclass { /* Positioning */ /* Display & Box Model */ /* Background and typography styles */ /* Transitions */ /* Other */ }

組織好的代碼格式

代碼的易讀性和易維護性成正比。下面是我遵循的格式化方法。

// 糟糕 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的做法 .someclass { background-p_w_picpath : linear-gradient( #000 , #ccc ), linear-gradient( #ccc , #ddd ); box-shadow: 2px 2px 2px #000 , 1px 4px 1px 1px #ddd inset ; }

顯然，這裡隻講述了少數的規則，是我在我自己的CSS中，本着更高效和更易維護性而嘗試遵循的規則。如果你想閱讀更多的知識，我建議閱讀MDN上的編寫高效的CSS和谷歌的優化浏覽器渲染指南。