在 Mozilla UI 中書寫高效率 CSS

原文：Writing Efficient CSS for use in the Mozilla UI
譯文：在 Mozilla UI 中書寫高效率 CSS

以下文檔描述了應用在 Mozilla UI 中優化 CSS 文件的規則。第一部分是對于 Mozilla 樣式系統分類規則的一般性討論。在了解這個系統的基礎上，后續部分包含了一些指南，書寫可以利用這個樣式系統實踐優點的樣式的指南。

樣式系統如何分類規則

樣式系統把規則分為四大類。理解這些類是很重要的，因為對于規則的匹配來說他們是首先要考慮的。之后的段落中會使用“主選擇符”這個說法。主選擇符是指選擇符最右邊的部分(最終要匹配的那個元素，而不是它的祖先元素)。例如，在以下規則中：

a img, div > p, h1 + [title] {}

主選擇符是 “img”, “p”, 和 “[title]“。

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 的規則 */

Tag 規則

如果主選擇符不是 ID 或者 class，那么下一個類很可能就是 tag 分類。如果一條規則指定 tag 為主選擇符，就被歸入此類。

例如：

• td { } /* 基于 tag 的規則 */
• treeitem > treerow { } /* 基于 tag 的規則 */
• input[type="checkbox"] { } /* 基于 tag 的規則 */

全局規則

除以上分類之外都歸入此類。

例如：

• [hidden="true"] { } /* 全局規則 */
• *{} /* 全局規則 */
• tree > [collapsed="true"] { } /* 全局規則 */

樣式系統如何匹配規則

樣式系統從最右邊的選擇符開始向左側移動來匹配一條規則。樣式系統會一直向左匹配選擇符直到規則匹配完畢或者由于出錯停止匹配。

對于規則分類的第一步發生在主選擇符類別基礎上。這個分類的目的是把那些不需要浪費時間匹配的規則過濾出來。這是顯著提升性能的重點。對于一個給定的需要匹配的元素，規則越少，樣式的渲染越快。例如，元素有一個 ID，那么只有和元素 ID 匹配的 ID 規則會被檢索。只有和元素的 class 匹配的 class 規則會被檢索。只有和 tag 匹配的 tag 規則會被檢索。全局規則總是會被檢索。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈