欢迎使用CSDN-markdown编辑器

1.缩进
使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符，当然在sublime中可以进行选择。

.selector {     margin: 0; }

2.空格
选择器 与 { 之间须包含空格。

.selector {}

属性名与之后的 : 之间不包含空格， : 与 属性值之间包含空格。

margin: 0;

列表型属性值书写在单行时，“,” 后跟一个空格。

font-family: Arial, sans-serif;

3.选择器
当一个声明中包含多个 selector 时，每个选择器声明独占一行

/* good */.post, .page, .comment {     line-height: 1.5; } /* bad */.post, .page, .comment {line-height: 1.5; }

4.属性
属性定义另起一行

/* good */.selector {     margin: 0;     padding: 0; } /* bad */.selector { margin: 0; padding: 0; }

【重要】属性定义后必须以分号结尾。

/* good */.selector {     margin: 0; } /* bad */.selector {     margin: 0  //此处未以分号结尾}

5.选择器
5.1 如无必要，不要为 id、class 选择器添加类型选择器进行限定

/* good */#error, .danger-message {     font-color: #c00; } /* bad */dialog#error, p.danger-message {     font-color: #c00; }

5.2 选择器的嵌套层级最好不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */#username input {} .comment .avatar {} /* bad */.page .header .login #username input {} .comment div * {}

6.属性缩写
使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。

7.属性书写顺序
同一规则下的属性在书写时，按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

* Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等* Box Model 相关属性包括：border / margin / padding / width / height 等* Typographic 相关属性包括：font / line-height / text-align / word-wrap 等* Visual 相关属性包括：background / color / transition / list-style 等

【强调】另外，如果包含 content 属性，应放在最前面。

8.尽量不使用 !important 声明。