代码规范

一般性命名

使用小写字母，复合词以 - 分隔; 例如 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 {}