高效的CSS(2008年7月4日更新)
生活随笔
收集整理的這篇文章主要介紹了
高效的CSS(2008年7月4日更新)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文將介紹 Mozilla UI 在用的一些 CSS 優化規則。第一部分是關于 Mozilla 樣式系統如何分類選擇器的一般討論,在理解了這些的基礎上,第二部分則羅列了 Mozilla 樣式系統書寫 CSS 的規則指南。
=====================2008年7月4日更新======================
十六進制的顏色值對位數與大小寫
- 建議用 - color:#FF33AA;
display與visibility的差異
- 建議用 - display:none;
border:none;與border:0;的區別
- 建議用 - border:none;
不宜過小的背景圖片平鋪
- 建議用 - 衡量適中體積及尺寸的背景圖片
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 { }
- 好 - .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); }
請記住,特別是在匿名內容中,他們都擁有相同的 class 。上面那條不好的選擇器寫法導致每個菜單的圖標都會被檢查是否包含在收藏夾菜單欄目中。這是非常耗資源的(因為有很多菜單);這個選擇器應該不要被收藏夾以外的菜單檢查。
使用 -moz-image-region
把很多圖片組合在一張圖片里,然后用 -moz-image-region 來選擇他們,會比每張圖片分開存儲,執行效率上高很多。 《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的高效的CSS(2008年7月4日更新)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 你到底工作了几天
- 下一篇: 中国乒乓球,牛!!!!