1.代码风格
1.1 文件
[建议] CSS
文件使用无 BOM
的 UTF-8
编码。
1.2 缩进
[强制] 使用 4
个空格做为一个缩进层级,不允许使用 2
个空格 或 tab
字符。
1.3 空格
[强制] 选择器
与 {
之间必须包含空格。
.selector {
}
[强制] 属性名
与之后的 :
之间不允许包含空格, :
与 属性值
之间必须包含空格。
margin: 0;
[强制] 列表型属性值
书写在单行时,,
后必须跟一个空格。
font-family: Arial, sans-serif;
1.4 行长度
[强制] 每行不得超过 120
个字符,除非单行不可分割。
[建议] 对于超长的样式,在样式值的 空格
处或 ,
后换行,建议按逻辑分组。
/* 不同属性值按逻辑分组 */ 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)) );
1.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; }
[强制] 属性选择器中的值必须用双引号包围。
不允许使用单引号,不允许不使用引号。
1.6 属性
[强制] 属性定义必须另起一行。
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }
[强制] 属性定义后必须以分号结尾。
2.通用
2.1选择器
[强制] 如无必要,不得为 id
、class
选择器添加类型选择器进行限定。
在性能和维护性上,都有一定的影响。
/* good */ #error, .danger-message { font-color: #c00; } /* bad */ dialog#error, p.danger-message { font-color: #c00; }
[建议] 选择器的嵌套层级应不大于 3
级,位置靠后的限定条件应尽可能精确。
2.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
等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。
2.3 属性书写顺序
[建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以 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
属性,应放在最前面。
2.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear
或触发 BFC
的方式进行 clearfix
。尽量不使用增加空标签的方式。
触发 BFC 的方式很多,常见的有:
- float 非 none
- position 非 static
- overflow 非 visible
另需注意,对已经触发 BFC 的元素不需要再进行 clearfix。
2.5 !important
[建议] 尽量不使用 !important
声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important
定义样式。
2.6 z-index
[建议] 将 z-index
进行分层,对文档流外绝对定位元素的视觉层级关系进行管理。
同层的多个元素,如多个由用户输入触发的 Dialog,在该层级内使用相同的 z-index
或递增 z-index
。
建议每层包含100个 z-index
来容纳足够的元素,如果每层元素较多,可以调整这个数值。
[建议] 在可控环境下,期望显示在最上层的元素,z-index
指定为 999999
。
[建议] 在第三方环境下,期望显示在最上层的元素,通过标签内联和 !important
,将 z-index
指定为 2147483647
。
解释:
第三方环境对于开发者来说完全不可控。在第三方环境下的元素,为了保证元素不被其页面其他样式定义覆盖,需要采用此做法。
3. 值与单位
3.1 文本
[强制] 文本内容必须用双引号包围。
文本类型的内容可能在选择器、属性值等内容中。