上篇详细引用了百度团队的html编码规范,受益匪浅,结合我们部门当前已有的css编码规范,做一个我们团队css编码规范的分享。
1 前言
本文档定义了CSS的编写格式和风格规则。目的是提高代码质量,并使代码更容易维护。
易维护的代码意味着代码具有如下特征:
-
可读性好
-
具有一致性
-
可预见性好
-
看起来好像同一个人编写的
-
有文档
以下文档中,每一条规范都会有一个实施级别,分别是:
- 必须: 必须执行
- 建议: 推荐不强制使用
- 不建议: 不推荐但也可以使用
- 可以: 可以使用
- 仅限于: 限制使用范围
- 禁止: 不可以使用
2 代码风格
2.1 用不带BOM头的 UTF-8编码。
让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。
在HTML模板和文件中指定编码 <meta charset="utf-8”>
。 不需要制定样式表的编码,它默认为UTF-8.
2.2 缩进
2.2.1 必须
使用 4
个空格做为一个缩进层级,不允许使用 2
个空格 或 tab
字符。
.selector { margin: 0; padding: 0; }
2.3 空格
2.3.1 必须
在{
之前必须有空格
例如:
.selector { } @page { background-color: #fff; }
2.3.2 必须
:
之间不能包含空格,在:
后必须有空格
例如:
margin: 0;
2.3.3 必须
,
后必须跟一个空格。
例如:
h1, h2 { font-family: Arial, sans-serif; }
2.3.4 必须
>、+、~
选择器的两边各保留一个空格。
例如:
/* 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; }
2.4 换行
2.4.1 必须
两个声明块儿之间必须有一个空行
h1 { font-size: 16px; } /*此上需要空一行*/ h2 { font-family: Arial, sans-serif; }
2.4.2 必须
选择器组中的选择器之间,必须换行。
例如:
h1, h2 { font-family: Arial, sans-serif; } /* bad */ h1, h2 { font-family: Arial, sans-serif; }
2.4.3 必须
每条声明独占一行
例如:
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }
2.5 分号
2.5.1 必须
属性定义后必须以分号结尾
例如:
/* good */ .selector { margin: 0; padding: 0; /* bad */ .selector { margin: 0; padding: 0 }
3 其他
3.1 建议
属性值尽量缩写。
在可以使用缩写的情况下,尽量使用属性值的缩写形式。 示例:
/* good */ .post { font: 12px/1.5 arial, sans-serif; } /* bad */ .post { font-family: arial, sans-serif; font-size: 12px; line-height: 1.5; }
3.2 建议
当元素内部含有浮动元素需要撑起高度时,清除浮动尽量使用BFC,不使用增加空标签的方式。
见:http://w3help.org/zh-cn/kb/010/ 块级格式化上下文
3.3 不建议
使用 !important
!important
的作用是来平衡层叠级别,因此,除非用于强制覆盖用户样式,否则,不允许使用!important
。
3.4 建议
控制 z-index 的值
在可控的情况下(不包含三方css),z-index不允许设置过大,如,在没有层级是98
的情况下,不允许使用99
。
对于希望展示在最上层的元素,可以设置z-index为 1000000。
3.5 必须
使用双引号包含文本内容
字符串可能在选择器,属性值,content 等内容中。 /* good */ html[lang|="zh"] q:before { font-family: "Microsoft YaHei", sans-serif; content: "“"; }
html[lang|="zh"] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; } /* bad */ html[lang|=zh] q:before { font-family: 'Microsoft YaHei', sans-serif; content: '“'; } html[lang|=zh] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; }
3.6 必须
当数值为 0 - 1 之间的小数时,省略整数部分的 0。
示例: /* good */ panel { opacity: .8 }
/* bad */ panel { opacity: 0.8 }
3.7 必须
url() 函数中的路径不加引号。
示例:
body {
background: url(bg.png);
}
3.8 建议
url() 函数中的绝对路径可省去协议名。
示例:
body { background: url(//baidu.com/img/bg.png) no-repeat 0 0; }
3.9 必须
长度为 0 时须省略单位。
/* good */ body { padding: 0 5px; } /* bad */ body { padding: 0px 5px; }
3.10 必须
颜色值不允许使用命名色值。
示例:
/* good */ .success { color: #90ee90; } /* bad */ .success { color: lightgreen; }
3.11 必须
颜色值中的英文字符采用小写。
/* good */ .success { background-color: #aca; color: #90ee90; } /* good */ .success { background-color: #ACA; color: #90EE90; } /* bad */ .success { background-color: #ACA; color: #90ee90; }