CSS代码书写规范究极指南

1.格式化代码
1.1文件
[建议]：CSS文件使用无BOM的UTF-8编码
1.2缩进
[强制]：使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

1. .selector {   
2.     margin: 0;   
3.     padding: 0;   
4. }  

1.3空格
[强制]：选择器 与 { 之间必须包含空格。

1. .selector {   
2. }  

[强制]：选择器 与 { 之间必须包含空格。

1. margin: 0;  

[强制]：列表性属性书在单行时，,后必须跟一个空格

1. font-family: Aria, sans-serif;  

1.4行长度
[强制]： 每行不得超过 120 个字符，除非单行不可分割。
[建议]： 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

1. /* 不同属性值按逻辑分组 */  
2. background:   
3.     transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
4.     no-repeat 0 0;   
5. /* 可重复多次的属性，每次重复一行 */  
6. background-image:   
7.     url(aVeryVeryVeryLongUrlIsPlacedHere)   
8.     url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
9. /* 类似函数的属性值可以根据函数调用的缩进进行 */  
10. background-image: -webkit-gradient(   
11.     linear,   
12.     left bottombottom,   
13.     left top,   
14.     color-stop(0.04, rgb(88,94,124)),   
15.     color-stop(0.52, rgb(115,123,162))   
16. );  

1.5选择器
[强制]：当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

1. /* good */  
2. .post,   
3. .page,   
4. .comment {   
5.     line-height: 1.5;   
6. }   
7. /* bad */  
8. .post, .page, .comment {   
9.     line-height: 1.5;   
10. }  

[强制]： >、+、~ 选择器的两边各保留一个空格。
示例：

1. /* good */  
2. main > nav {   
3.     padding: 10px;   
4. }   
5. label + input {   
6.     margin-left: 5px;   
7. }   
8. input:checked ~ button {   
9.     background-color: #69C;   
10. }   
11. /* bad */  
12. main>nav {   
13.     padding: 10px;