高效 CSS 指南
避免全局規(guī)則
確保規(guī)則不以全局分類結(jié)束
不要給 ID 分類規(guī)則指定標簽名或者 class
如果有一條樣式規(guī)則是以 ID 選擇符為主選擇符的，就別再畫蛇添足的加上標簽名了。ID 都是唯一的，因此加上標簽名反而會無謂地拖慢匹配過程。(當(dāng)有不同元素使用同一類名，而又需要動態(tài)地改變其中一個元素的類名來針對不同情況應(yīng)用不同樣式時是個例外。)
- BAD – button#backButton { }
- BAD – .menu-left#newMenuIcon { }
- GOOD – #backButton { }
- GOOD – #newMenuIcon { }
不要給 class 分類規(guī)則指定標簽名
和以上規(guī)則類似，所有的類名也是唯一的。標簽和類名連綴的寫法是一個慣例(但是，如果設(shè)計的變更使得需要改變標簽就會有靈活性的問題，因為也需要改變 class — 最好選用具有嚴格語義的名字，這種靈活性也是分離樣式表的目標之一)。
- BAD – treecell.indented { }
- GOOD – .treecell-indented { }
- BEST – .hierarchy-deep { }
盡量把規(guī)則應(yīng)用到最明確的類上。
拖慢系統(tǒng)最大的一個原因是有太多的 tag 分類規(guī)則了。通過給元素增加類名，可以把這些 tag 類里的規(guī)則分一部分去class 分類，就可以不需要浪費時間來試圖給一個標簽匹配那么多的的規(guī)則了。
- BAD – treeitem[mailfolder="true"] > treerow > treecell { }
- GOOD – .treecell-mailfolder { }
避免后代選擇符
CSS 中，后代選擇符(descendant)[注1]的耗能高的可怕，尤其是選擇符的規(guī)則是在 tag 或者全局分類中。子選擇符(child selector)則經(jīng)常是真正所需。如果沒有主題模塊所有者的明確允許，UI CSS 中禁止使用后代選擇符。
- BAD – treehead treerow treecell { }
- BETTER, BUT STILL BAD (see next guideline) – treehead > treerow > treecell { }
Tag 類規(guī)則中最好不要包含后代選擇符
避免使用具有 tag 類規(guī)則的后代選擇符。這會明顯地增加匹配時間（尤其是這些規(guī)則會被多次匹配時）。
- BAD – treehead > treerow > treecell { }
- BEST – .treecell-header { }
小心子選擇符的使用
要小心使用子代選擇符。如果有別的方式可以不用，就不要用子選擇符。尤其是子選擇符被大量使用在 RDF 樹和類似的菜單中時。
- BAD – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
要注意模版中來自 RDF 的屬性是可以復(fù)制的！可以利用這一點把 RDF 屬性復(fù)制到需要改變那個屬性的子元素上。
- GOOD – .tree-folderpane-icon[IsImapServer="true"] { }
倚賴繼承
了解并使用那些可以繼承的屬性。XUL widgetry[注2] 已經(jīng)明確設(shè)置了，因此可以把 list-style-image 或者 font 規(guī)則應(yīng)用到父級標簽上，它將滲透進匿名內(nèi)容。因此就不需要浪費時間為那些匿名內(nèi)容寫規(guī)則了。
- BAD – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
- GOOD – #bookmarkMenuItem { list-style-image: url(blah); }
上例中，樣式化匿名內(nèi)容的需求（沒有理解 list-style-image 可以繼承）導(dǎo)致了一條 class 類規(guī)則。其實這條規(guī)則應(yīng)該屬于最明確的一類 — ID 類規(guī)則。
要記住，尤其是那些匿名內(nèi)容，它們都有同樣的 class。上面那個不好的例子導(dǎo)致需要檢查每個菜單的圖標是否包含在 bookmarks 菜單項中。這是非常可怕的高昂消耗（有很多菜單）；除 bookmarks 菜單之外，這條規(guī)則不應(yīng)該被其他任何菜單想檢查。
使用 -moz-image-region
把一堆圖片放到一個單獨的圖片文件中，并用 -moz-image-region[注3] 選中會有顯著的性能提升。()
注1: 后代選擇符(descendant selector) 子選擇符(child selector) 是有區(qū)別的。單從字面來講，后代選擇符，顧名思義包括兒子、孫子、重孫子等所有后代; 子選擇符只是指兒子，就不管那幫孫子了。
注2: XUL widgetry 不清楚是啥。
注3: 貌似想法和現(xiàn)在說的 CSS sprites 方法差不多，要知道這可是十年前(2000年)的文章啊。 – 糖伴西紅柿
本文鏈接：http://www.95time.cn/tech/web/2010/7459.asp 
出處：
責(zé)任編輯：moby
上一頁 在 Mozilla UI 中書寫高效率 CSS [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 在 Mozilla UI 中書寫高效率 CSS [2]
