- 相關(guān)推薦
CSS的注釋部分編程引申
導(dǎo)語：CSS注釋就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等。
CSS注釋的開始使用/*,結(jié)束使用*/
CSS注釋語法
CSS Code復(fù)制內(nèi)容到剪貼板
/* 注釋內(nèi)容 */
示例
/* ----------文字樣式開始---------- */
/* 夢之都白色12象素文字 */
.dreamduwhite12px
{
color:white;
font-size:12px;
}
/* 夢之都黑色16象素文字 */
.dreamdublack16px
{
color:black;
font-size:16px;
}
/* ----------文字樣式結(jié)束---------- */
風(fēng)格建議
我使用行寬不超過 80 字節(jié)的文檔塊風(fēng)格注釋：
CSS Code復(fù)制內(nèi)容到剪貼板
/**
* 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)風(fēng)格的注釋。
*
* 這里開始是描述更詳細(xì)、篇幅更長的注釋正文。當(dāng)然，我們要把行寬控制在 80 字節(jié)以內(nèi)。
*
* 我們可以在注釋中嵌入 HTML 標(biāo)記，而且這也是個不錯的辦法：
*
Lorem
*
* 如果是注釋內(nèi)嵌的標(biāo)記的話，在它前面不加星號，以免被復(fù)制進(jìn)去。
*/
在注釋中應(yīng)當(dāng)盡量詳細(xì)描述代碼，因為對你來說清晰易懂的內(nèi)容對其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。
注釋的拓展用法
注釋有許多很高級的用法，例如：
準(zhǔn)修飾選擇器(Quasi-qualified selectors)
代碼標(biāo)簽
繼承標(biāo)記
準(zhǔn)修飾選擇器(Quasi-qualified selectors)
你應(yīng)當(dāng)避免過分修飾選擇器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能，影響 class 復(fù)用性，增加選擇器私有度。這些都是你應(yīng)當(dāng)竭力避免的。
不過有時你可能希望告訴其他開發(fā)者 class 的使用范圍。以 .product-page 為例，這個 class 看起來像是一個根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無法判斷。
我們可以在選擇器前加上準(zhǔn)修飾(即將前面的類型選擇器注釋掉)來描述我們規(guī)劃的 class 作用范圍：
CSS Code復(fù)制內(nèi)容到剪貼板
/*html*/.product-page{}
這樣我們就能準(zhǔn)確獲知該 class 的作用范圍而不會影響復(fù)用性。
其它例子如：
CSS Code復(fù)制內(nèi)容到剪貼板
/*ol*/.breadcrumb{}
/*p*/.intro{}
/*ul*/.image-thumbs{}
這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。
代碼標(biāo)簽
如果你寫了一組新樣式的話，可以在它上面加上標(biāo)簽，例如：
這些標(biāo)簽可以使得其他開發(fā)者快速找到相關(guān)代碼。如果一個開發(fā)者需要查找和列表相關(guān)的部分，他只要搜索 ^lists 就能快速定位到 .nav，.matrix 以及其它相關(guān)部分。
繼承標(biāo)記
將面向?qū)ο蟮乃悸酚糜?CSS 編寫的話，你經(jīng)常能找到兩部分 CSS 密切相關(guān)(其一為基礎(chǔ)，其一為拓展)卻分列兩處。我們可以用繼承標(biāo)記來在原元素和繼承元素之間建立緊密聯(lián)系。這些在注釋中的寫法如下：
在元素的基本樣式中：
CSS Code復(fù)制內(nèi)容到剪貼板
/**
* Extend `.foo` in theme.css
*/
.foo{}
在元素的拓展樣式中：
CSS Code復(fù)制內(nèi)容到剪貼板
/**
* Extends `.foo` in base.css
*/
.bar{}
這樣一來我們就能在兩塊相隔很遠(yuǎn)的代碼間建立緊密聯(lián)系。
【CSS的注釋部分編程引申】相關(guān)文章：
CSS編程的外部CSS文件引用方法是什么06-28
CSS的DRY編程方式使用方法05-31
什么是CSS03-02
p+css的15個css重則07-08
CSS清除浮動01-19
Dreamweaver編寫CSS的教程06-02
CSS網(wǎng)頁設(shè)計技巧08-14
CSS簡寫方法總結(jié)06-27