一直以来，书写 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 样式表文件命名