DIV CSS 佈局教程網

樣式系統如何拆分規則

樣式系統將規則拆分成四個主要類別：

1.ID 規則
2.Class 規則
3.標簽規則
4.通用規則
理解這些分類是十分關鍵的，因為它們是構建規則匹配塊的基礎。

我在下面的段落中使用術語 關鍵選擇器（key selector）。選擇器的最後面的部分即為關鍵選擇器（即用來匹配目標元素的那部分，而不是該元素的祖先元素）。

例如，在下面規則中…

CSS Code復制內容到剪貼板

1. a img,
2. div > p,
3. h1 + [title] {
4. …
5. }

關鍵選擇器為 img、 p 和 title.

ID 規則

這第一個類別包含了那些將 ID 選擇器作為關鍵選擇器的規則。

示例

CSS Code復制內容到剪貼板

1. button#backButton {…} /* This is an ID-categorized rule */
2. #urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */
3. treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */

Class 規則

如果一個規則將一個 class 明確作為它的關鍵選擇器，那麼它就屬於該類別。

示例

CSS Code復制內容到剪貼板

1. button.toolbarButton {…} /* A class-based rule */
2. .fancyText {…} /* A class-based rule */
3. menuitem > .menu-left[checked="true"] {…} /* A class-based rule */

標簽規則

如果既沒有 class 也沒有 ID 來明確作為關鍵選擇器，那麼接下來的候選者就是 標簽 類別。 如果一條規則將一個標簽作為它的關鍵選擇器，那麼這條規則就屬於該類別。

示例

CSS Code復制內容到剪貼板

1. td {…} /* A tag-based rule */
2. treeitem > treerow {…} /* A tag-based rule */
3. input[type="checkbox"] {…} /* A tag-based rule */

通用規則

不屬於上面那些類別的規則都屬於這個類別。

示例

CSS Code復制內容到剪貼板

1. [hidden="true"] {…} /* A universal rule */
2. * {…} /* A universal rule */
3. tree > [collapsed="true"] {…} /* A universal rule */

樣式系統如何匹配規則

樣式系統從關鍵選擇器開始匹配規則，然後左移（查找規則選擇器的任何祖先元素）。只要選擇器的子樹（substree）一直在檢查，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該條規則。

規則過濾是你需要學習的最基礎的概念。分類存在的意義就是過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。

這就是能夠極大提高性能的關鍵。對於一個給定的元素，需要匹配的規則越少，樣式的解析就會越快。

舉個例子，如果一個元素擁有一個 ID，那麼只有匹配該 ID 的 ID 規則才會被選中。同理，只有當 Class 規則中的 class 出現在元素上時該規則才被檢查。只有當標簽規則的標簽匹配時該規則才被檢查。通用規則始終都會檢查。

高效 CSS 指南

避免通用規則

請確保規則不以通用類型選擇器作為結束！

不要用標簽名或 classes 來限定 ID 規則

如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽名。因為 ID 是唯一的，增加標簽只會沒必要地減緩匹配過程。

差

CSS Code復制內容到剪貼板

1. button#backButton {…}

差

CSS Code復制內容到剪貼板

1. .menu-left#newMenuIcon {…}

好

CSS Code復制內容到剪貼板

1. #backButton {…}

好

CSS Code復制內容到剪貼板

1. #newMenuIcon {…}

例外：在不同的場景下，要動態改變元素的class，從而應用不同的樣式，這是可取的。但是這個相同的class是與其他元素所共享的。
不要用標簽名限定 class 規則

前面那節內容在這裡同樣適用。雖然在同一頁面能夠多次使用 class，但它仍然比標簽名更獨特。

按照慣例，你可以將標簽名包含在 class 名裡。但是，這會有損靈活性；如果設計更改以至於要變更標簽，這條class 名也必須跟著變動。（最好的辦法是選擇嚴格語義化的名字，畢竟分離樣式表的一個目標就是為了靈活性。）

差

CSS Code復制內容到剪貼板

1. treecell.indented {…}

好

CSS Code復制內容到剪貼板

1. .treecell-indented {…}

棒

CSS Code復制內容到剪貼板

1. .hIErarchy-deep {…}

盡量使用最具體的類別

解析速度變慢的罪魁禍首就是標簽類別中有過多的規則。通過增加 class 到元素上，我們就可以進一步的將這些規則劃分到 Class 類別中，這將減少用於匹配標簽的時間。

差

CSS Code復制內容到剪貼板

1. treeitem[mailfolder="true"] > treerow > treecell {…}

好

CSS Code復制內容到剪貼板

1. .treecell-mailfolder {…}

避免後代選擇器

後代選擇器是 CSS 中性能耗用最大的選擇器。 它是性能開銷相當大的——特別是當選擇器在標簽或通用類別中。

通常我們需要的是 子選擇器。比如說，當性能十分差的時候，Firefox 的用戶界面CSS 將毫無理由的禁止掉後代選擇器。你也應該在網頁中這麼做。

差

CSS Code復制內容到剪貼板

1. treehead treerow treecell {…}

略好，但還是差（查看下一條指南）

CSS Code復制內容到剪貼板

1. treehead > treerow > treecell {…}

標簽分類的規則不要包含子選擇器

標簽類別的規則中避免使用子選擇器。否則的話，在該元素出現的所有地方，匹配時間都將極大延長（特別是當規則很可能會被匹配）。

差

CSS Code復制內容到剪貼板

1. treehead > treerow > treecell {…}

好

CSS Code復制內容到剪貼板

1. .treecell-header {…}

在使用子選擇器的地方想想為什麼

當使用子選擇器時要十分謹慎。能免則免。

特別來說，子選擇器常常用於 RDF 樹與菜單：

差

CSS Code復制內容到剪貼板

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

要記住，模板中的 REF 特性可以重復出現！好好利用這一優點。在子 XUL 元素上重復使用 RDF 屬性，這樣可以基於該屬性來修改元素。

GOOD

CSS Code復制內容到剪貼板

1. .tree-folderpane-icon[IsImapServer="true"] {…}

依賴繼承

了解哪些屬性能夠繼承，然後允許它們這樣做！

例如，XUL組件會明確的設置，使得父級元素的列表樣式圖像或字體規則衍生到匿名內容。因而沒有必要去在匿名內容上直接應用規則浪費時間。

差

CSS Code復制內容到剪貼板

1. #bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

好

CSS Code復制內容到剪貼板

1. #bookmarkMenuItem { list-style-image: url(blah) }

在以上示例中，要為匿名內容應用樣式（不利用 list-style-image 的繼承特性），將會產生Class分類中的規則，當這條規則本應該止於ID分類——所有分類中最確切的分類。

謹記: 所有元素都有同一種class，尤其是匿名內容！

上面示例中的“差”規則強制每個菜單的圖標都要在包含書簽的菜單項內進行測試。因為這裡有很多菜單，這將是極其耗費的。相反，這條“好”規則將測試限制在書簽菜單（外圍容器，非單獨項）內。

使用 -moz-image-region！

如果你正在開發針對Mozilla的代碼：將一系列圖像放置在一個單獨的文件中，然後使用 -moz-image-region 進行選擇，這比將他們分別放在自身的文件中來選擇要表現得更加良好。

使用局部樣式表

如果你能夠明確將樣式表作為XBL源，這些樣式僅僅應用在被綁定的元素和其中的匿名內容上。這會減小通用規則和子元素選擇器帶來的負面影響，因為他們考慮的元素會更少。

如非必要則避免特定浏覽器的渲染特征

總有有一些針對特定浏覽器的或者實驗性的標簽和CSS屬性，他們以前綴的形式來區分能夠起作用的浏覽器，例如 -webkit、-moz、 -ms、-o 等等。一旦某個標簽或屬性被標准化，這些前綴屬性就會被移除。舉個例子，在 border-radius 被標准化和被所有主流浏覽器實現之前，你必須使用 -webkit-border-radius 和 -moz-border-radius 等屬性。

對特定渲染的前綴和標簽及屬性的標准化的變化保持意識，並且在任何可行的時間都要去避免使用任何特定渲染的特性。