CSS的注釋部分編程引申

 　　CSS注釋

　　就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以協助我們記起CSS的含義,載入在HTML文檔的位置等.

　　CSS注釋的開始使用/*,結束使用*/

　　CSS注釋文法

　　CSS Code複製內容到剪貼簿

　　/* 注釋內容 */

　　樣本

　　/* ----------文字樣式開始---------- */

　　/* 夢之都白色12象素文字 */

　　.dreamduwhite12px

　　{

　　color:white;

　　font-size:12px;

　　}

　　/* 夢之都黑色16象素文字 */

　　.dreamdublack16px

　　{

　　color:black;

　　font-size:16px;

　　}

　　/* ----------文字樣式結束---------- */

　　風格建議

　　我使用行寬不超過 80 位元組的文檔塊風格注釋：

　　CSS Code複製內容到剪貼簿

　　/**

　　* This is a docBlock style comment

　　*

　　* This is a longer description of the comment, describing the code in more

　　* detail. We limit these lines to a maximum of 80 characters in length.

　　*

　　* We can have markup in the comments, and are encouraged to do so:

　　*

　　

 

　　

Lorem

 

　　

 

　　*

　　* We do not prefix lines of code with an asterisk as to do so would inhibit

　　* copy and paste.

　　*/

　　/**

　　* 這是一個文檔塊(DocBlock)風格的注釋。

　　*

　　* 這裡開始是描述更詳細、篇幅更長的注釋本文。當然，我們要把行寬控制在 80 位元組以內。

　　*

　　* 我們可以在注釋中嵌入 HTML 標籤，而且這也是個不錯的辦法：

　　*

　　

 

　　

Lorem

 

　　

 

　　*

　　* 如果是注釋內嵌的標記的話，在它前面不加星號，以免被複製進去。

　　*/

　　在注釋中應當盡量詳細描述代碼，因為對你來說清晰易懂的內容對其他人可能並非如此。每寫一部分代碼就要專門寫注釋以詳解。

　　注釋的拓展用法

　　注釋有許多很進階的用法，例如：

　　准修飾選取器(Quasi-qualified selectors)

　　代碼標籤

　　繼承標記

　　准修飾選取器(Quasi-qualified selectors)

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

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

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

　　CSS Code複製內容到剪貼簿

　　/*html*/.product-page{}

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

　　其它例子如：

　　CSS Code複製內容到剪貼簿

　　/*ol*/.breadcrumb{}

　　/*p*/.intro{}

　　/*ul*/.image-thumbs{}

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

　　代碼標籤

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

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

　　繼承標記

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

　　在元素的基本樣式中：

　　CSS Code複製內容到剪貼簿

　　/**

　　* Extend `.foo` in theme.css

　　*/

　　.foo{}

　　在元素的拓展樣式中：

　　CSS Code複製內容到剪貼簿

　　/**

　　* Extends `.foo` in base.css

　　*/

　　.bar{}

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