從前面的內容我們已經知道,樣式是可以分成各個模塊去寫的,如何表示各個模塊的作用及它們之間的關係呢?CSS的註釋是不二的選擇。
與普通的註釋不同,模塊的註釋需要一些更詳細的內容,比如:功能說明、模塊版本、關聯信息等等。 像 《基類、擴展類──頁面重構中的模塊化設計(五)》 中例子的註釋,顯然是比較簡單的。爲了減少不必要的溝通,我們可以使用較爲固定的格式去完成這個註釋。
舉個例子:
/**
* @name :mode_name
* @author :ghostzhang
* @version :1.0
* @type :基類
* @explain :Demo
*/
.mode_name{...}
.mode_name h2{
...
}
.mode_name .cont{
...
}
/* @end **/
/**
* @name :mode_name_b
* @author :ghostzhang
* @version :1.0
* @type :擴展類
* @explain :Demo
* @dependent :mode_name
*/
.mode_name_b{...}
.mode_name_b h2{
...
}
.mode_name_b .cont{
...
}
/* @end **/
從註釋中就可以知道mode_name_b和mode_name_a之間的關係。
主要的關鍵字有:
- @name
- 標明模塊的名稱
- @author
- 標明模塊的作者
- @version
- 標明該模塊的版本
- @explain
- 功能說明
- @relating
- 標明該關聯的模塊
- @dependent
- 標明該所依賴的模塊
- 標明該模塊的類型:公共、基類、擴展類
需要注意的規則:
- 以“/**”標記模塊的開始
- 從“/**”到第一個“*/”作爲模塊相關信息的說明,包含關鍵字
- 關鍵字以 @ 開頭,“:”後開始到“*”的內容爲相關的值,即:
- @關鍵字:值*
- 以“/* @end **/”標記模塊的結束
- 模塊註釋內不可嵌套
提供了一個小工具( cssModeCode )幫助大家填寫樣式模塊的註釋。
文章地址:http://www.cssforest.org/blog/index.php?id=168