本文將介紹 Mozilla UI 在用的一些 CSS 優化規則。第一部分是關于 Mozilla 樣式系統如何分類選擇器的一般討論，在理解了這些的基礎上，第二部分則羅列了 Mozilla 樣式系統書寫 CSS 的規則指南。

=====================2008年7月4日更新======================

十六進制的顏色值對位數與大小寫

編寫十六進制顏色值時你可能會用小寫字母或省略成3位數，關于這寫法沒找到確實的數據證明對瀏覽器的渲染效率是否有影響，但十六進制的顏色值默認標準是大寫及6位數標注。在未知情況下不希望冒險而降低了渲染的效率。

不贊成 - color:#f3a;

• 建議用 - color:#FF33AA;

display與visibility的差異

他們用于設置或檢索是否顯示對象。display隱藏對象不保留物理空間，visibility為隱藏對象保留占據的物理空間。當瀏覽器渲染被占據的物理空間時，會有所消耗資源。

不贊成 - visibility:hidden;

• 建議用 - display:none;

border:none;與border:0;的區別

和display與visibility的關系類似，分別不保留與保留空間。更多的是border:0;盡管可以隱藏掉邊框，但它會為你保留border-color/border-style的使用權。

不贊成 - border:0;

• 建議用 - border:none;

不宜過小的背景圖片平鋪

一張寬高1px的背景圖片，雖然文件體積非常之小，但渲染寬高500px的板塊需要重復平鋪2500次。提高背景圖片渲染效率跟圖片尺寸及體積有關，最大的圖片文件體積保持約70KB。

不贊成 - 寬高8px以下的平鋪背景圖片

• 建議用 - 衡量適中體積及尺寸的背景圖片

IE的濾鏡

IE的濾鏡除了比較消耗資源外也有兼容性問題。當中有令PNG透明的濾鏡，可采用GIF或JPG似透非透的辦法來避免使用此濾鏡。建議只在IE6應用GIF透明，因為IE7以上已經支持了PNG透明。

不贊成，濫用IE濾鏡因為消耗資源外也有兼容性問題。

• 建議用，最好選擇其它方法能避免使用濾鏡。

*{ margin:0; padding:0;}避免瀏覽器樣式差異

*號通配符把所有標簽都初始化一遍，瀏覽器的渲染消耗一定的資源。有部分在標簽在不同瀏覽器上幾乎無差異，或是某些已經不推薦使用的標簽(因為你不會去用它)，它們不需通配符要重新初始化一遍這樣做能節省一點資源。

不贊成，使用*號通配符

• 不贊成，div span button b table等標簽納入通配符控制內外填充樣式
• 建議用，有選擇性地使用通配符控制內外填充樣式。
  
  
  ========================================================

樣式系統是如何分類選擇器的？

Mozilla 樣式系統將規則主要分成四類。理解這個分類非常的重要，他是你了解規則匹配的第一步。下面我用了一個術語：關鍵選擇符，指的是位于最右邊的選擇符。他可以是 id 選擇符，class 選擇符或者標簽選擇符。

ID 類

ID 選擇符作為關鍵選擇符

例：
button#backButton { } /* ID 類 */
#urlBar[type="autocomplete"] { } /* ID 類 */
treeitem > treerow > treecell#myCell?:active { } /* ID 類 */

Class 類

Class 選擇符作為關鍵選擇符

例：
button.toolbarButton { } /* Class 類 */
.fancyText { } /* Class 類 */
menuitem > .menu-left[checked="true"] { } /* Class 類 */

標簽類

標簽選擇符作為關鍵選擇符

例：
td { } /* 標簽類 */
treeitem > treerow { } /* 標簽類 */
input[type="checkbox"] { } /* 標簽類 */

通用類

所有其他的都屬于此類

例：
:table { } /* 通用類 */
[hidden="true"] { } /* 通用類 */
* { } /* 通用類 */
tree > [collapsed="true"] { } /* 通用類 */

樣式系統是如何匹配規則的？

Mozilla 樣式系統先從最右邊的選擇符開始匹配，然后由右及左，依次匹配。只要子樹（？）繼續檢查，樣式系統就會繼續向左進行匹配，直到匹配成功或者因不匹配而退出。
你的第一步就是根據關鍵選擇符的類型過濾選擇器分類。目的就是過濾掉部分選擇器，而不需要浪費時間去嘗試匹配他們。這是增強性能的關鍵。你用來檢查元素用的選擇器類越少，樣式系統解析地就越快。例如，如果你的元素有一個ID，那么只有符合元素ID的ID類會被檢查；只有符合元素Class的Class類會被檢查；只有符合元素標簽的標簽類會被檢查；而通用類則總是會被檢查。

高效 CSS 指南

避免通用類

確保選擇器不是以通用類結束。?

不要用標簽名或class來描述ID類

如果你有一個選擇器是以ID類作為關鍵選擇符，請不要添加多余標簽名上去。因為ID是唯一的，你不要為了一個不存在的理由而降低了匹配的效率。

• 差 - button#backButton { }
• 差 - .menu-left#newMenuIcon { }
• 好 - #backButton { }
• 好 - #newMenuIcon { }

不要用標簽名來描述 class 類

和上一條類似，所有的 class 也是唯一的。你應該把標簽名包含在 class 名中。

• 差 - treecell.indented { }
• 好 - .treecell-indented { }

盡量選擇最特殊的類來存放選擇器

降低系統效率的一個最大原因是我們在標簽類中用了過多的選擇符。通過添加 class 到元素，我們可以將類別進行再細分為 class 類，這樣就不用為了一個標簽浪費時間去匹配過多的選擇符了。

• 差 - treeitem[mailfolder="true"] > treerow > treecell { }
• 好 - .treecell-mailfolder { }
  

避免子孫選擇符

子孫選擇符是CSS中最耗資源的選擇符。他真的是非常的耗資源，尤其是在選擇器使用標簽類或通用類的時候。很多情況中，我們真正想要的是子選擇符。除非有明確說明，在 UI CSS 中是嚴禁使用子孫選擇符的。

• 差 - treehead treerow treecell { }
• 好一點，但還是不行(參照下一條) - treehead > treerow > treecell { }
  

標簽類中不要包含子選擇符

不要在標簽類中使用子選擇符。否則，每次元素的出現，都會額外地增加匹配時間。（特別是當選擇器似乎多半會被匹配的情況下）

• 差 - treehead > treerow > treecell { }
• 最好 - .treecell-header { }

留意所有子選擇符的使用

小心地使用子選擇符。如果你能想出一個的不使用他的方法，那么就不要使用。特別是在 RDF 樹和菜單會頻繁地使用子選擇符，像這樣。

• 差 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

請記住 RDF 的屬性是可以在模板中被復制的！利用這一點，我們可以復制那些想基于該屬性改變的子 XUL 元素上的 RDF 屬性。

• 好 - .tree-folderpane-icon[IsImapServer="true"] { }

運用繼承

理解哪個屬性會繼承，并允許他們這么做！我們已經清楚地建立了 XUL widgetry(?) ，所以你可以把 list-style-image 或 font 屬性設置在父標簽上，然后他會滲透到匿名內容里。這樣，你就不需要浪費時間在匿名內容上直接寫聲明了。

• 差 - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
• 好 - #bookmarkMenuItem { list-style-image: url(blah); }
  

在上面的例子中，定義匿名內容樣式的需求（不用去搞明白 list-style-image 是如何繼承的）導致需要一個 class 類的選擇器，而這條規則實際上更應該以最唯一的 ID 類結尾。
請記住，特別是在匿名內容中，他們都擁有相同的 class 。上面那條不好的選擇器寫法導致每個菜單的圖標都會被檢查是否包含在收藏夾菜單欄目中。這是非常耗資源的（因為有很多菜單）；這個選擇器應該不要被收藏夾以外的菜單檢查。

使用 -moz-image-region

把很多圖片組合在一張圖片里，然后用 -moz-image-region 來選擇他們，會比每張圖片分開存儲，執行效率上高很多。 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的高效的CSS（2008年7月4日更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。