CSS模塊的註釋——頁面重構中的模塊化設計（六）

從前面的內容我們已經知道，樣式是可以分成各個模塊去寫的，如何表示各個模塊的作用及它們之間的關係呢？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