CSS的註釋部分程式設計引申
- 網頁設計
- 關注:3W次
導語:CSS註釋就像HTML教程中描述的一樣,在CSS文件中註釋也起到很重要的作用,可以幫助我們記起CSS的含義,載入在HTML文件的位置等。
CSS註釋的開始使用/*,結束使用*/
CSS註釋語法
CSS Code複製內容到剪貼簿
/* 註釋內容 */
/* ----------文字樣式開始---------- */
/* 夢之都白色12象素文字 */
mduwhite12px
{
color:white;
font-size:12px;
}
/* 夢之都黑色16象素文字 */
mdublack16px
{
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)
你應當避免過分修飾選擇器,例如如果你能寫 {} 就儘量不要寫 {}。過分修飾選擇器將影響效能,影響 class 複用性,增加選擇器私有度。這些都是你應當竭力避免的`。
不過有時你可能希望告訴其他開發者 class 的使用範圍。以 uct-page 為例,這個 class 看起來像是一個根容器,可能是 html 或者 body 元素,但是僅憑 uct-page 則無法判斷。
我們可以在選擇器前加上準修飾(即將前面的型別選擇器註釋掉)來描述我們規劃的 class 作用範圍:
CSS Code複製內容到剪貼簿
/*html*/uct-page{}
這樣我們就能準確獲知該 class 的作用範圍而不會影響複用性。
其它例子如:
CSS Code複製內容到剪貼簿
/*ol*/dcrumb{}
/*p*/o{}
/*ul*/e-thumbs{}
這樣我們就能在不影響程式碼私有度的前提下獲知 class 作用範圍。
程式碼標籤
如果你寫了一組新樣式的話,可以在它上面加上標籤,例如:
這些標籤可以使得其他開發者快速找到相關程式碼。如果一個開發者需要查詢和列表相關的部分,他只要搜尋 ^lists 就能快速定位到 ,ix 以及其它相關部分。
繼承標記
將面向物件的思路用於 CSS 編寫的話,你經常能找到兩部分 CSS 密切相關(其一為基礎,其一為拓展)卻分列兩處。我們可以用繼承標記來在原元素和繼承元素之間建立緊密聯絡。這些在註釋中的寫法如下:
在元素的基本樣式中:
CSS Code複製內容到剪貼簿
/**
* Extend `` in
*/
{}
在元素的拓展樣式中:
CSS Code複製內容到剪貼簿
/**
* Extends `` in
*/
{}
這樣一來我們就能在兩塊相隔很遠的程式碼間建立緊密聯絡。
- 文章版權屬於文章作者所有,轉載請註明 https://xuezhezhai.com/zh-tw/sjzz/sjzz/961rk.html