萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS注釋的技巧介紹

CSS注釋的技巧介紹

大家知道CSS注釋嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗,在此拿出來與大家分享下,請大家互相指正。

准修飾選擇器(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 作用范圍。

代碼標簽

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

CSS Code復制內容到剪貼板

/**

* ^navigation ^lists

*/

.nav{}

/**

* ^grids ^lists ^tables

*/

.matrix{}

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

繼承標記

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

在元素的基本樣式中:

CSS Code復制內容到剪貼板

/**

* Extend `.foo` in theme.css

*/

.foo{}

在元素的拓展樣式中:

CSS Code復制內容到剪貼板

/**

* Extends `.foo` in base.css

*/

.bar{}

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

相信大家已經了解CSS注釋了吧!感謝大家對我們網站的支持!

相關推薦:

CSS樣式編寫技巧

CSS怎麼編寫規范了呢 

copyright © 萬盛學電腦網 all rights reserved