css编码规范

上篇详细引用了百度团队的html编码规范，受益匪浅，结合我们部门当前已有的css编码规范，做一个我们团队css编码规范的分享。

1 前言

本文档定义了CSS的编写格式和风格规则。目的是提高代码质量，并使代码更容易维护。

易维护的代码意味着代码具有如下特征：

  1. 可读性好

  2. 具有一致性

  3. 可预见性好

  4. 看起来好像同一个人编写的

  5. 有文档

以下文档中，每一条规范都会有一个实施级别，分别是：

  • 必须： 必须执行
  • 建议： 推荐不强制使用
  • 不建议： 不推荐但也可以使用
  • 可以： 可以使用
  • 仅限于： 限制使用范围
  • 禁止： 不可以使用

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;
}

 

3.12 禁止 使用 Expression。

posted @ 2016-03-06 14:11  小飞侠51号  阅读(216)  评论(0)  编辑  收藏  举报