从前面的内容我们已经知道,样式是可以分成各个模块去写的,如何表示各个模块的作用及它们之间的关系呢?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 )帮助大家填写样式模块的注释。
文章地址:http://www.cssforest.org/blog/index.php?id=168