css 校验
除了 css hack 和浏览器私有属性，推荐使用
w3c css validator 校验其余的代码.
一般性命名
使用小写字母，复合词以 - 分隔; 例如nav.css ,
login-nav.css ,
login-page
id 和类的命名
为 id 和样式类使用有意义或通用的名字，避免由于 css 命名更改引起的不必要的文档或模板改变；例如
/* 不推荐： 无意义 */
#yee-1901 {}
/* 不推荐： 表现层的命名 */
.button-green {}
/* 推荐: 具体 */
#gallery {}
#login {}
.video {}
/* 推荐: 通用 */
.effect {}
.alt {}
id 和 class 的命名长度应该适中，不要太简略也不要太详细；例如
/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}
元素选择器
为了 性能原因 ，请避免元素选择器和类选择器以及 id 选择器混用;例如
/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}
简写属性名字
为了提高可读性，尽可能的使用简写属性。例如
/* 不推荐 */
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 的情况省略单位；例如
margin: 0;
padding: 0;
0 前缀情况
省略属性值中的 0 前缀;例如
font-size: .8em;
16 进制的颜色值表示
尽可能使用 3 个字符的 16 进制颜色值；例如
/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;
前缀
为了防止冲突，对于应用特定的样式附加应用前缀；例如
.login-help {} /* login page */
#detail-note {} /* detail page */
hacks
避免 css hack ， 考虑使用特定浏览器前缀表示；例如
.ks-ie6 p {
margin: 1em 0;
}
格式规范
属性声明顺序
按照字母顺序声明属性，排序时忽略私有的浏览器前缀，对于特定的浏览器，私有的浏览器前缀应该参与排序;例如
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
块缩进
块的内容应该被缩进；例如
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
分号
使用分号结束单个属性的定义；例如
/* 不推荐 */
.test {
display: block;
height: 100px
}
/* 推荐 */
.test {
display: block;
height: 100px;
}
空格
在属性名冒号后加一个空格，例如
/* 不推荐 */
.test {
display:block;
}
/* 推荐 */
.test {
display: block;
}
空行
多个选择以及声明间以行分隔；例如
/* 不推荐 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
多个 css 规则间以空行分隔；例如
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
引号
尽可能的不用引号，迫不得已时使用单引号.
/* 不推荐 */
@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 规则间用块状注释和空行分离;例如
/* Header */
#login-header {}
#login-header-below {}
/* Footer */
#login-footer {}
#login-footer-below {}
/* Gallery */
.login-gallery {}
.login-gallery-other {}