当你加入到一个项目,相关的CSS文件可能会看得你头昏眼花。时间一长,修改了哪些内容,增加了哪些内容,也都弄不清,维护成本相当的高。正好我们国际站正在进行代码的规范工作。下面的这段代码注释的思路值得借鉴。
通常写法:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}
注释的代码段:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}
上面的代码中,注释了增加代码的时间,修改代码的时间以及修改前的属性值。如果是多人协作,我建议还加上修改者的名称。当然,这样一直写下将带来过多的垃圾代码。需要定期的整理归档,保持文档的时效性。
Tags: css
个人认为作者提到的给css加上一些维护性的注释非常非常的amazing。
但是也像作者说的,注释写多了也会带来很多垃圾代码(改的人多了的话也未必看得清楚)。特别想知道作者最后提到的归档整理是怎么个操作过程。
[回复]
这样会不会垃圾代码太多了?
[回复]
更好的做法是使用专门的注释方案,我一般用CSSDOC(目前恐怕也只有这个选择),写完了注释,使用parser可以把这些注释提取出来形成文档。
不过CSS算不上程序语言,难度和功能都有限,很多时候看文档还不如直接看代码 – 这点不比Java等编程语言。
如果担心增加流量,可以使用脚本输出css,在输出前将注释用正则过滤掉,比如:
或者干脆维护两套css,一套是带有注释的开发版本,一套是没有注释、空格、空行的生产版本。
[回复]
html被过滤掉了,这个评论表单应该加个相应的提示。
上面提到的代码是:
link ref=”stylesheet” href=”css.php?file=style.css”
[回复]
我记得我在这里留言了,可至今未显示出来,还在审核吗?
[回复]
我觉得楼上的方案不错,2套CSS, 而且完全可以模拟JavaScript的处理方式,一套是完整开发加注释的 source, 一套是通过程序处理过后的 pack, 发布只用pack
[回复]