一直以来，书写css都是率性所为，没有遵循一定的规范；俗话说：没有规矩，不成方圆。造成了代码可读性极差，导致了网站后期维护非常困难。

一、书写顺序

/* bad */
.example {
    color: red;
    z-index: -1;
    background-color: #9e0;
    display: inline-block;
    font-size: 1.5em;
}

/* good */
.example {
    z-index: -1;
    display: inline-block;
    font-size: 1.5em;
    background-color: #9e0;
}

二、一些注意事项

能缩写的尽量缩写

例如：background-color：#333；background-image: url(skin/p_103x196_1.jpg); background-repeat: repeat-x;

改为：background：url(skin/p_103x196_1.jpg) repeat-x #333；

/* bad */
.example {
    border-top-style: none;
    font-family: serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    paddiing-top: 0;
}

/* good */
.example {
    border-top: 0;
    font: 100%/1.6 serif;
    padding: 0 1em 2em;
}

能少些尽量少写

例如：font-size：0.9em 可以写为：font-size：.9em

灰度值可以缩写的缩写

例如：color：#666666; 可以写为：color：#666;

在别人阅读代码可以看得多的情况下缩写

例如：navigation 可以写为 nav

不建议使用_下划线来命名CSS选择器

原因：

1. 输入的时候少按一个shift键
2. 浏览器兼容问题 (比如炼独使用_tips的选择器命名，在IE6是无效的)
3. 能良好区分JavaScript变量命名(JS变量命名是用_)

二、CSS命名规范(常用的CSS命名规则)

三、css文件中注释的写法

注释的写法

/* Header */
内容区
/* End Header */

ID的命名

CSS样式表文件命名