CSS注釋的一些高級用法介紹

本篇內容介紹了“CSS注釋的一些高級用法介紹”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

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

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

CSS Code復制內容到剪貼板

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

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

其它例子如：

CSS Code復制內容到剪貼板

1. /*ol*/.breadcrumb{}   

2. /*p*/.intro{}   

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

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

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

CSS Code復制內容到剪貼板

1. /**  

2.  * ^navigation ^lists  

3.  */  

4. .nav{}   

5.   

6. /**  

7.  * ^grids ^lists ^tables  

8.  */  

9. .matrix{}  

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

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

在元素的基本樣式中：

CSS Code復制內容到剪貼板

1. /**  

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

3.  */  

4.  .foo{}  

在元素的拓展樣式中：

CSS Code復制內容到剪貼板

1. /**  

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

3.  */  

4.  .bar{}  

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

“CSS注釋的一些高級用法介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！