前几天公司要模仿一家客户的网站模板来为另一客户新建一个模板，说白了就是换个数据源，然后样式表再小修小改一下就行了。但通过浏览器控制台下载素材时，发现这个网站开发的挺专业的，单就样式表而言，代码工整，注释清楚，给人的感觉就是‘这样式表看起来挺漂亮的’。而相比之下，我们公司的样式表就挺恶心了，但是好的东西就要学，所谓它山之石可以攻玉。
我们一点点看，这个人家2年前就写好的样式表有哪些值得学习的地方。
1、时间戳和签名
/* * --------------------------------------------- * website :潍坊商业学校 * filename :default.css * revision :1.0 * createdate :2012-07-02 * author :lc * description :default.css * --------------------------------------------- */
我觉得肯花时间来写时间戳和签名的人，在其他需要注释的地方也不会偷工减料
2、使用单行模式格式化CSS
所谓单行模式就是将原来多行的描述
#top_back
{
width:1015px;
height:32px;
margin:0
auto;
background: url(../images/homes/top_back.jpg) repeat-x;
}
通过精简工具，格式化成为一行#top_back{ width:1015px; height:32px; margin:0 auto; background: url(../images/homes/top_back.jpg) repeat-x; }，也许我这样写你看不出来效果，但你可以想象一下，一个样式表统一都用多行进行描述，那在快速浏览时会多么的头疼。
推荐一个CSS在线格式化工具：CSSTidy
3、清晰的组织结构
使用注释来标识不同的区块，将会使你的样式表更加整洁、有条理
* { margin: 0; padding: 0; } body { font: 12px "宋体", Verdana, Arial, sans-serif; background: #eeeeee; } ul { list-style-type: none; } a { text-decoration: none; color: #000; } img { border: none; } table { border-collapse: collapse; } /* 常用类 */ .floatLeft { float: left; } .floatRight { float: right; } .clearFloat { clear: both; } .alignRight { text-align: right; } .alignCenter { text-align: center; } ... ... /*****************************顶部按钮****************************************/ ... ... /*****************************头部****************************************/ ... ...
4、类特征值的命名规则
避免使用颜色，例如left-blue(包括颜色名称和十六进制值或者宽度，高度的尺寸值)，同时你也尽量的避免去使用任何表明表现形式的值，例如box，要不然将表现和内容分离的意义也就不复存在了。推荐的命名规则：.product-description { color: #369; }
5、id特征值的命名规则
id特征值的命名时，应该更加严谨，因为你的命名可能会影响到后台程序员调用。另外注意，命名要有层次感，例如嵌套层的时候使用如下命名规则，那我们就算不看html代码也能大概猜出特征值要描述的元素。
#focus { width: 340px; height: 261px; float: left; overflow: hidden; } #focus01 { padding: 30px 15px 4px 25px; width: 300px; height: 227px; } #focus02 { width: 300px; height: 227px; overflow: hidden; } 或者 #focus { width: 340px; height: 261px; float: left; overflow: hidden; } #focus_left { padding: 30px 15px 4px 25px; width: 300px; height: 227px; } #focus_right { width: 300px; height: 227px; overflow: hidden; }