CSS中注釋部分編程引申的示例分析

今天就跟大家聊聊有關CSS中注釋部分編程引申的示例分析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

CSS注釋

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

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

CSS注釋語法

1. /* 注釋內容 */  

2. 示例   

3.   

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

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

6. .dreamduwhite12px  

7. {   

8.  color:white;   

9.  font-size:12px;   

10. }   

11.   

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

13. .dreamdublack16px  

14. {   

15.  color:black;   

16.  font-size:16px;   

17. }   

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

風格建議
我使用行寬不超過 80 字節的文檔塊風格注釋：

1. /**  

2.  * This is a docBlock style comment  

3.  *   

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

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

6.  *   

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

8.  *   

9.    <div class=foo>  

10.        <p>Lorem</p>  

11.    </div>  

12.  *   

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

14.  * copy and paste.  

15.  */  

16.   

17.   

18. /**  

19.  * 這是一個文檔塊（DocBlock）風格的注釋。  

20.  *  

21.  * 這里開始是描述更詳細、篇幅更長的注釋正文。當然，我們要把行寬控制在 80 字節以內。  

22.  *  

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

24.  *  

25.     <div class=foo>  

26.         <p>Lorem</p>  

27.     </div>  

28.  *  

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

30.  */  

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

注釋的拓展用法

注釋有許多很高級的用法，例如：

準修飾選擇器（Quasi-qualified selectors）
代碼標簽
繼承標記
準修飾選擇器（Quasi-qualified selectors）

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

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

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

1. /*html*/.product-page{}  

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

其它例子如：

1. /*ol*/.breadcrumb{}   

2. /*p*/.intro{}   

3. /*ul*/.image-thumbs{}  

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

代碼標簽

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

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

繼承標記

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

在元素的基本樣式中：

1. /**  

2.  * Extend `.foo` in theme.css  

3.  */  

4.  .foo{}  

在元素的拓展樣式中：

/**  

1.  * Extends `.foo` in base.css  

2.  */  

3.  .bar{}  

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

看完上述內容，你們對CSS中注釋部分編程引申的示例分析有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。