5key.net

当你加入到一个项目，相关的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) */
}

上面的代码中，注释了增加代码的时间，修改代码的时间以及修改前的属性值。如果是多人协作，我建议还加上修改者的名称。当然，这样一直写下将带来过多的垃圾代码。需要定期的整理归档，保持文档的时效性。

阿里前端（方凳）出了道题，有点意思，想了一方案，给大家分享一下：）

预览地址：http://5key.net/demo/liquid-css-title/

要求如下：

1. 宽度自适应
2. 标题文字自适应
3. 尽量用一张背景图
4. 尽量少的嵌套

效果嘛，先给出我的截图如下：

以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。

1、先来看用到的背景图：

2、代码部分：