1 前言
CSS 作为网页样式的描述语言,在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致,容易被理解和被维护。
虽然本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时,适用的部分也应尽量遵循本文档的约定。
2 代码风格
2.1 文件
[建议] CSS
文件使用无 BOM
的 UTF-8
编码。
解释:
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
2.2 缩进
[强制] 使用 4
个空格做为一个缩进层级,不允许使用 2
个空格 或 tab
字符。
示例:
.selector { margin: 0; padding: 0; }
2.3 空格
[强制] 选择器
与 {
之间必须包含空格。
示例:
.selector {
}
[强制] 属性名
与之后的 :
之间不允许包含空格, :
与 属性值
之间必须包含空格。
示例:
margin: 0;
[强制] 列表型属性值
书写在单行时,,
后必须跟一个空格。
示例:
font-family: Arial, sans-serif;
2.4 行长度
[强制] 每行不得超过 120
个字符,除非单行不可分割。
解释:
常见不可分割的场景为URL超长。
[建议] 对于超长的样式,在样式值的 空格
处或 ,
后换行,建议按逻辑分组。
示例:
/* 不同属性值按逻辑分组 */ background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; /* 可重复多次的属性,每次重复一行 */ background-image: url(aVeryVeryVeryLongUrlIsPlacedHere) url(anotherVeryVeryVeryLongUrlIsPlacedHere); /* 类似函数的属性值可以根据函数调用的缩进进行 */ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)) );
2.5 选择器
[强制] 当一个 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.6 属性
[强制] 属性定义必须另起一行。
示例:
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }
[强制] 属性定义后必须以分号结尾。
示例:
/* good */ .selector { margin: 0; } /* bad */ .selector { margin: 0 }
3 通用
3.1 选择器
[强制] 如无必要,不得为 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 * {}
3.2 属性缩写
[建议] 在可以使用缩写的情况下,尽量使用属性缩写。
示例:
/* 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
等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。
解释:
border
/ margin
/ padding
等缩写会同时设置多个属性的值,容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值,则应该分开设置。
示例:
/* centering <article class="page"> horizontally and highlight featured ones */ article { margin: 5px; border: 1px solid #999; }