CSS注釋的一些進階用法介紹

CSS注釋的一些進階用法

准修飾選取器（Quasi-qualified selectors）

你應當避免過分修飾選取器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選取器將影響效能，影響 class 複用性，增加選取器私人度。這些都是你應當竭力避免的。

不過有時你可能希望告訴其他開發人員 class 的使用範圍。以 .product-page 為例，這個 class 看起來像是一個根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無法判斷。

我們可以在選取器前加上准修飾（即將前面的類型選取器注釋掉）來描述我們規劃的 class 作用範圍：

/*html*/.product-page{}

這樣我們就能準確獲知該 class 的作用範圍而不會影響複用性。

其它例子如：

/*ol*/.breadcrumb{}      /*p*/.intro{}      /*ul*/.image-thumbs{}

這樣我們就能在不影響代碼私人度的前提下獲知 class 作用範圍。
代碼標籤

如果你寫了一組新樣式的話，可以在它上面加上標籤，例如：

/**      * ^navigation ^lists      */     .nav{}           /**      * ^grids ^lists ^tables      */     .matrix{}

這些標籤可以使得其他開發人員快速找到相關代碼。如果一個開發人員需要尋找和列表相關的部分，他只要搜尋 ^lists 就能快速定位到 .nav，.matrix 以及其它相關部分。
繼承標記

將物件導向的思路用於 CSS 編寫的話，你經常能找到兩部分 CSS 密切相關（其一為基礎，其一為拓展）卻分列兩處。我們可以用繼承標記來在原元素和繼承元素之間建立緊密聯絡。這些在注釋中的寫法如下：

在元素的基本樣式中：

/**      * Extend `.foo` in theme.css      */      .foo{}

在元素的拓展樣式中：

/**      * Extends `.foo` in base.css      */      .bar{}

這樣一來我們就能在兩塊相隔很遠的代碼間建立緊密聯絡。

