CSS代码书写规范究极指南

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

CSS Code复制内容到剪贴板

.selector {   
    margin: 0;   
    padding: 0;   
}  

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

CSS Code复制内容到剪贴板

.selector {   
}  

CSS Code复制内容到剪贴板

margin: 0;  

CSS Code复制内容到剪贴板

font-family: Aria, sans-serif;  

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

CSS Code复制内容到剪贴板

/* 不同属性值按逻辑分组 */  
background:   
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
    no-repeat 0 0;   
/* 可重复多次的属性，每次重复一行 */  
background-image:   
    url(aVeryVeryVeryLongUrlIsPlacedHere)   
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
/* 类似函数的属性值可以根据函数调用的缩进进行 */  
background-image: -webkit-gradient(   
    linear,   
    left bottombottom,   
    left top,   
    color-stop(0.04, rgb(88,94,124)),   
    color-stop(0.52, rgb(115,123,162))   
);  

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

CSS Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

/* good */  
main > nav {   
    padding: 10px;