以下文件描述了應用在Mozilla UI 中最佳化CSS 檔案的規則。第一部分是對於Mozilla 樣式系統分類規則的一般性討論。在了解這個系統的基礎上,後續部分包含了一些指南,書寫可以利用這個樣式系統來實踐優點的樣式的指南。
樣式系統把規則分成四大類。理解這些類別是很重要的,因為對於規則的匹配來說他們是首先要考慮的。之後的段落中會使用「主選擇符」這個說法。主選擇符是指選擇符最右邊的部分(最終要匹配的那個元素,而不是它的祖先元素)。例如,在以下規則中:
a img, div > p, h1 + [title] {}
主選擇符是“img”, “p”, 和“[title]“。
ID 選擇符作為主選擇符的規則。
例如:
如果一條規則有一個指定的class 作為主選擇符,就被歸入此類。
例如:
如果主選擇符不是ID 或class,那麼下一個類別很可能就是tag 分類。如果一條規則指定tag 為主選擇符,就被歸入此類。
例如:
除以上分類之外都歸入此類。
例如:
樣式系統從最右邊的選擇符號開始往左側移動來符合一條規則。樣式系統會一直向左匹配選擇符直到規則匹配完畢或因為出錯而停止匹配。
對於規則分類的第一步發生在主選擇符類別基礎上。這個分類的目的是把那些不需要浪費時間匹配的規則過濾出來。這是顯著提升效能的重點。對於一個給定的需要匹配的元素,規則越少,樣式的渲染越快。例如,元素有一個ID,那麼只有和元素ID 相符的ID 規則會被檢索。只有和元素的class 相符的class 規則會被檢索。只有和tag 匹配的tag 規則會被檢索。全域規則總是會被檢索。