代码规范

一般性命名

使用小写字母,复合词以 - 分隔; 例如nav.css , login-nav.css , login-page.css

id 和类的命名

为 id 和样式类使用有意义或通用的名字,避免由于 css 命名更改引起的不必要的文档或模板改变;

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 不推荐: 无意义 */
#yee-1901 {}
/* 不推荐: 表现层的命名 */
.button-green {}
/* 推荐: 具体 */
#gallery {}
#login {}
.video {}
/* 推荐: 通用 */
.effect {}
.alt {}

id 和 class 的命名长度应该适中,不要太简略也不要太详细;

例如:

1
2
3
4
5
6
/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

元素选择器

为了 性能原因 , 请避免元素选择器和类选择器以及 id 选择器混用;

例如:

1
2
3
4
5
6
/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

简写属性名字

为了提高可读性,尽可能的使用简写属性;

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 和单位

对属性值为 0 的情况省略单位;

例如:

1
2
margin: 0;
padding: 0;

0 前缀情况

省略属性值中的 0 前缀;

例如:

1
font-size: .8em;

16 进制的颜色值表示

尽可能使用 3 个字符的 16 进制颜色值;

例如:

1
2
3
4
/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

前缀

为了防止冲突,对于应用特定的样式附加应用前缀;

例如:

1
2
.login-help {} /* login page */
#detail-note {} /* detail page */

hacks

避免 css hack , 考虑使用特定浏览器前缀表示;

例如:

1
2
3
.ks-ie6 p {
margin: 1em 0;
}

格式规范

属性声明顺序

按照字母顺序声明属性,排序时忽略私有的浏览器前缀,对于特定的浏览器,私有的浏览器前缀应该参与排序;

例如:

1
2
3
4
5
6
7
8
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

块缩进

块的内容应该被缩进;

例如:

1
2
3
4
5
6
7
8
@media screen, projection {
html {
background: #fff;
color: #444;
}
}

分号

使用分号结束单个属性的定义;

例如:

1
2
3
4
5
6
7
8
9
10
/* 不推荐 */
.test {
display: block;
height: 100px
}
/* 推荐 */
.test {
display: block;
height: 100px;
}

空格

在属性名冒号后加一个空格;

例如:

1
2
3
4
5
6
7
8
/* 不推荐 */
.test {
display:block;
}
/* 推荐 */
.test {
display: block;
}

空行

多个选择以及声明间以行分隔;

例如:

1
2
3
4
5
6
7
8
9
10
11
/* 不推荐 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

多个 css 规则间以空行分隔;

例如:

1
2
3
4
5
6
7
8
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}

引号

尽可能的不用引号,迫不得已时使用单引号;

1
2
3
4
5
6
7
8
9
10
11
12
/* 不推荐 */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推荐 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}

注释

成组的 css 规则间用块状注释和空行分离;

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Header */
#login-header {}
#login-header-below {}
/* Footer */
#login-footer {}
#login-footer-below {}
/* Gallery */
.login-gallery {}
.login-gallery-other {}