注：本文非原創，點選
檢視原帖
以下文件描述了應用在 mozilla ui 中優化 css 檔案的規則。第一部分是對於 mozilla 樣式系統分類規則的一般性討論。在了解這個系統的基礎上，後續部分包含了一些指南，書寫可以利用這個樣式系統實踐優點的樣式的指南。
樣式系統把規則分為四大類。理解這些類是很重要的，因為對於規則的匹配來說他們是首先要考慮的。之後的段落中會使用「主選擇符」這個說法。主選擇符是指選擇符最右邊的部分(最終要匹配的那個元素，而不是它的祖先元素)。例如，在以下規則中：
a img, div > p, h1 + [title] {}
主選擇符是 「img」, 「p」, 和 「[title]「。
id 規則
id 選擇符作為主選擇符的規則。
例如：class 規則
如果一條規則有乙個指定的 class 作為主選擇符，就被歸入此類。
例如：tag 規則
如果主選擇符不是 id 或者 class，那麼下乙個類很可能就是 tag 分類。如果一條規則指定 tag 為主選擇符，就被歸入此類。
例如：全域性規則
除以上分類之外都歸入此類。
例如：樣式系統從最右邊的選擇符開始向左側移動來匹配一條規則。樣式系統會一直向左匹配選擇符直到規則匹配完畢或者由於出錯停止匹配。
對於規則分類的第一步發生在主選擇符類別基礎上。這個分類的目的是把那些不需要浪費時間匹配的規則過濾出來。這是顯著提公升效能的重點。對於乙個給定的需要匹配的元素，規則越少，樣式的渲染越快。例如，元素有乙個 id，那麼只有和元素 id 匹配的 id 規則會被檢索。只有和元素的 class 匹配的 class 規則會被檢索。只有和 tag 匹配的 tag 規則會被檢索。全域性規則總是會被檢索。
避免全域性規則
確保規則不以全域性分類結束
不要給 id 分類規則指定標籤名或者 class
如果有一條樣式規則是以 id 選擇符為主選擇符的，就別再畫蛇添足的加上標籤名了。id 都是唯一的，因此加上標籤名反而會無謂地拖慢匹配過程。(當有不同元素使用同一類名，而又需要動態地改變其中乙個元素的類名來針對不同情況應用不同樣式時是個例外。)
不要給 class 分類規則指定標籤名
和以上規則類似，所有的類名也是唯一的。標籤和類名連綴的寫法是乙個慣例(但是，如果設計的變更使得需要改變標籤就會有靈活性的問題，因為也需要改變 class — 最好選用具有嚴格語義的名字，這種靈活性也是分離樣式表的目標之一)。
盡量把規則應用到最明確的類上。
拖慢系統最大的乙個原因是有太多的 tag 分類規則了。通過給元素增加類名，可以把這些 tag 類裡的規則分一部分去class 分類，就可以不需要浪費時間來試圖給乙個標籤匹配那麼多的的規則了。
避免後代選擇符
css 中，後代選擇符(descendant)[注1]
的耗能高的可怕，尤其是選擇符的規則是在 tag 或者全域性分類中。子選擇符(child selector)則經常是真正所需。如果沒有主題模組所有者的明確允許，ui css 中禁止使用後代選擇符。
tag 類規則中最好不要包含後代選擇符
避免使用具有 tag 類規則的後代選擇符。這會明顯地增加匹配時間（尤其是這些規則會被多次匹配時）。
小心子選擇符的使用
要小心使用子代選擇符。如果有別的方式可以不用，就不要用子選擇符。尤其是子選擇符被大量使用在 rdf 樹和類似的選單中時。
要注意模版中來自 rdf 的屬性是可以複製的！可以利用這一點把 rdf 屬性複製到需要改變那個屬性的子元素上。
倚賴繼承
了解並使用那些可以繼承的屬性。xul widgetry[注2]
已經明確設定了，因此可以把 list-style-image 或者 font 規則應用到父級標籤上，它將滲透進匿名內容。因此就不需要浪費時間為那些匿名內容寫規則了。
上例中，樣式化匿名內容的需求（沒有理解 list-style-image 可以繼承）導致了一條 class 類規則。其實這條規則應該屬於最明確的一類 — id 類規則。
要記住，尤其是那些匿名內容，它們都有同樣的 class。上面那個不好的例子導致需要檢查每個選單的圖示是否包含在 bookmarks 選單項中。這是非常可怕的高昂消耗（有很多選單）；除 bookmarks 選單之外，這條規則不應該被其他任何選單想檢查。
使用 -moz-image-region
把一堆放到乙個單獨的檔案中，並用 -moz-image-region
[注3]
選中會有顯著的效能提公升。()
注1: 後代選擇符(descendant selector) 子選擇符(child selector) 是有區別的。單從字面來講，後代選擇符，顧名思義包括兒子、孫子、重孫子等所有後代; 子選擇符只是指兒子，就不管那幫孫子了。
注2: xul widgetry 不清楚是啥。
注3: 貌似想法和現在說的 css sprites 方法差不多，要知道這可是十年前(2023年)的文章啊。 – 糖伴西紅柿
CSS的渲染效率 書寫高效的CSS
根據一些css寫作經驗，如何提高渲染效率及所占用消耗的資源，我們來 一下css的渲染效率，書寫高效的css。1 十六進製制的顏色值對位數與大小寫 編寫十六進製制顏色值時你可能會用小寫字母或省略成3位數，關於這寫法沒找到確實的資料證明對瀏覽器的渲染效率是否有影響，但十六進製制的顏色值預設標準是大寫及6...
Mysql中，書寫好的sql提高效率，安全
1，寫完sql查詢先explain檢視執行計畫 explain select from emp where empno 1001 or ename 老王 2，delete 或 update 加limit 防止資料誤刪除 delete from emp where empno 1001 or enam...
在輕鬆學習中成長 成功實現高效IT
it 的發展從來都是跌宕起伏的，也正是在這種發展下，it的格局在不斷的調整 變化，技術在不斷的推陳出新，理念在與時俱進。當今，虛擬化技術迅猛發展，雲計算模式被企業廣泛認同和採納，在這種時代背景下，it人士已經不滿足傳統 it模式的發展需要，迫切需要合理優化資源 提高資源使用效率，提公升 it環境的運...