css註釋妙用簡單介紹

關於css註釋絕大多數人一定不會陌生，它在編碼還是很重要的，尤其是大型的專案。

如果至今還對css註釋不太瞭解可以參閱CSS 註釋一章節。

通常是對程式碼的一些說明，比如這段程式碼是做什麼用的等等，下面再來介紹一下更為高階一點的用法，當然也不能說高階，只能說比較好用或者比較便利而已，下面進入正題。

一.準修飾選擇器（Quasi-qualified selectors）:

寫css程式碼的一個重要原則就是避免過分修飾選擇器，比如.nav{} 就儘量不要寫 div.nav{}，雖然後面的寫法可以讓閱讀者更能夠清晰的瞭解nav所屬的元素或者層級，但是這樣會降低效能，下面就採用註釋的方式來解決此問題。

以.product-page為例，這個class看起來像是一個根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無法判斷。

[CSS] 純文字檢視 複製程式碼
/*html*/.product-page{}

通過上面註釋的方式就可以達到準確獲知該 class 的作用範圍而不會影響複用性。

再看一下其他的例子:

[CSS] 純文字檢視 複製程式碼
/*ol*/.breadcrumb{}   
/*p*/.intro{}   
/*ul*/.image-thumbs{}

這樣我們就能在不影響程式碼私有度的前提下獲知 class 作用範圍。

二.程式碼標籤:

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

[CSS] 純文字檢視 複製程式碼
/**  
 * ^navigation ^lists  
 */  
.nav{}   
   
/**  
 * ^grids ^lists ^tables  
 */  
.matrix{}

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

三.繼承標記:

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

在元素的基本樣式中：

[CSS] 純文字檢視 複製程式碼
/**  
 * Extend `.foo` in theme.css  
 */  
 .foo{}

在元素的擴充樣式中:

[CSS] 純文字檢視 複製程式碼
/**  
 * Extends `.foo` in base.css  
 */  
 .bar{}

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