css规范

缩进

[强制] 使用 2 个空格或 tab 字符做为一个缩进层级。

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

1 空格

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

/* good */
.select {
}

/* bac*/
.select{
}

[强制] 属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

/* good */
margin: 0;

/* bad*/
margin : 0;

/* bad*/
margin:0;

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

/* good */
font-family: Arial, sans-serif;

/* bad*/
font-family: Arial,sans-serif;

2 选择器

[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。

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

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

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

/* good */
#username input {}
.comment .avatar {}

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

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

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

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

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

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

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

-[强制] 属性选择器中的值必须用双引号包围。

/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}

2 属性

[强制] 属性定义必须另起一行。

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

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

[强制] 属性定义后必须以分号结尾。

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

/* bad */
.selector {
    margin: 0
}

[建议] 在可以使用缩写的情况下，尽量使用属性缩写。

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

-** [建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。**

3 值与单位

3.1单位

[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0

/* good */
panel {
    opacity: .8;
}

/* bad */
panel {
    opacity: 0.8
}

[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

3.2 url()

-[强制] url() 函数中的路径不加引号。

body {
    background: url(bg.png);
}

[建议] url() 函数中的绝对路径可省去协议名。

body {
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}

3.3 长度

-** [强制] 长度为 0 时须省略单位。 (也只有长度单位可省)**

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

3.4 颜色

颜色值可以缩写时，必须使用缩写形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

-[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

[强制] 颜色值不允许使用命名色值。

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}

参考
css规范