CSS模块的注释——页面重构中的模块化设计（六）

由 Ghostzhang 发表于

从前面的内容我们已经知道，样式是可以分成各个模块去写的，如何表示各个模块的作用及它们之间的关系呢？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
标明该所依赖的模块
@type
标明该模块的类型：公共、基类、扩展类

需要注意的规则：

  • 以“/**”标记模块的开始
  • 从“/*”到第一个“/”作为模块相关信息的说明，包含关键字
  • 关键字以 @ 开头，“:”后开始到“*”的内容为相关的值，即：
  • @关键字:值*
  • 以“/* @end **/”标记模块的结束
  • 模块注释内不可嵌套

提供了一个小工具（ cssModeCode ）帮助大家填写样式模块的注释。

系列文章

讨论