当你加入到一个项目，相关的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、代码部分：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>自适应宽度标题 @5key.net</title>
- <style>
- body{margin:0; padding:20px; font-size:12px;}
- .box{background:url(2.gif) no-repeat; height:28px; padding:0 0 0 20px; margin:0 0 10px 0;}
- .innerbox{background:url(2.gif) no-repeat right 0; height:22px; padding:6px 0 0 0;}
- .title{background:url(2.gif) no-repeat -128px -29px; height:22px; float:left; padding:0 0 0 5px;}
- .title span{background:url(2.gif) no-repeat right -29px; height:16px; padding:6px 10px 0 5px; float:left; color:#F60; font-weight:bold;}
-
- .title1{width:150px;}
- .title2{width:200px;}
- .title3{width:300px;}
- </style>
- </head>
-
- <body>
- <div class="box title1">
- <div class="innerbox">
- <div class="title">
- <span>我是第一</span>
- </div>
- </div>
- </div>
- </body>
- </html>
很多朋友都会将饭否信息加在blog上。但大多都是放在侧边栏中。其实选择Wordpress的朋友可以将更新信息放到博客Logo下的description标签中。就像下面的“第一次被挂马了……”不过我们在这里只更新一条。
方法其实很简单：
首页，登录反否，点击【插件】->【Javascript插件】。复制【1、你的消息】下的JS代码（当然你也可以选择好友的消息）
以5key的为例,记得这里的fanfou_count=修改为1。
接下来我们修改wordpress的主题，代开header.php文件，找到，用上面代码段将其替换。
功能我们已经实现了，可是饭否的logo以及更多链接影响了美观。
没关系，来调整一下CSS就行了。打开CSS文件，找到.description。增加代码段,限制高度，将多余的部分隐藏起来。
height:15px;
overflow:hidden;
现在你可以更新一下自己的反否试试了。有问题给我留言 ：）
前两天在宜山路新华书店翻书，在一个角落里发现《CSS权威指南》，惊叹！居然还有？仔细一看，已是第三版。
记得曾有不少人问我哪里买，更甚者愿出三倍价格买去……
发此一文，只为告知仍有需要得朋友。卓越似乎已断货，要下手尽快。
豆瓣地址: http://www.douban.com/subject/2308234/
p.s: 豆瓣上的卓越亚马逊 (RMB 21.2)链接错误。
