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 文本
[强制] 文本内容必须用双引号包围.
文本类型的内容可能在选择器, 属性值等内容中.
3.2 数值
[强制] 当数值为 0 - 1 之间的小数时, 省略整数部分的 0.
- /* good */
- panel {
- opacity: .8;
- }
- /* bad */
- panel {
- opacity: 0.8;
- }
- 3.3 url()
[强制] url() 函数中的路径不加引号.
- body {
- background: url(bg.PNG);
- }
[建议] url() 函数中的绝对路径可省去协议名.
- body {
- background: url(//baidu.com/img/bg.PNG) no-repeat 0 0;
- }
3.4 长度
[强制] 长度为 0 时须省略单位. (也只有长度单位可省)
3.5 颜色
[强制] RGB 颜色值必须使用十六进制记号形式 #rrggbb. 不允许使用 rgb().
使用 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 {
- background-color: #aca;
- }
- /* bad */
- .success {
- background-color: #aaccaa;
- }
[强制] 颜色值不允许使用命名色值.
- /* good */
- .success {
- color: #90ee90;
- }
- /* bad */
- .success {
- color: lightgreen;
- }
[建议] 颜色值中的英文字符采用小写. 如不用小写也需要保证同一项目内保持大小写一致.
3.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置.
来源: http://www.bubuko.com/infodetail-2978887.html