CSS规范

ID和class的命名

为ID和class取通用且有意义的名字。

应该从ID和class的名字上就能看出这元素是干嘛用的，而不是表象或模糊不清的命名。

应该优先虑以这元素具体目来进行命名，这样他就最容易理解，减少更新。

通用名称可以加在兄弟元素都不特殊或没有个别意义的元素上，可以起名类似“helpers”这样的泛。

使用功能性或通用的名字会减少不必要的文档或模板修改。

ID 以Camel（驼峰） 命名法命名；
class 应以功能或内容命名，命名形式以单词字母小写，多个单词组成时，采用中划线"-"分隔；

/* 不推荐 */
.fw-800 {
  font-weight: 800;
}
.red {
  color: red;
}
/* 推荐 */
.heavy {
  font-weight: 800;
}
.important {
  color: red;
}

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。

/* 不推荐 */
#navigation {}
 
/* 推荐 */
.navigation {}

类型选择器

避免使用CSS类型选择器。

非必要的情况下不要使用元素标签名和ID或class进行组合。

出于性能上的考虑避免使用父辈节点做选择器 performance reasons。

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

属性缩写

写属性值的时候尽量使用缩写。

CSS很多属性都支持缩写shorthand （例如 font ） 尽量使用缩写，甚至只设置一个值。

使用缩写可以提高代码的效率和方便理解。

/* 不推荐 */
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后面的单位。

非必要的情况下 0 后面不用加单位。

数值小于1大于0的省略前面的0。

margin: 0;
padding: 0;
width: .33%;

URI外的引号

省略URI外的引号。

不要在 url() 里用 ( “” , ” ) 。

@import url(//www.google.com/css/go.css);

十六进制

十六进制尽可能使用3个字符。

加颜色值时候会用到它，使用3个字符的十六进制更短与简洁。

/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

前缀

选择器前面加上特殊应用标识的前缀（可选）。

大型项目中最好在ID或class名字前加上这种标识性前缀（命名空间），使用短破折号链接。

使用命名空间可以防止命名冲突，方便维护，比如在搜索和替换操作上。

.adw-help {} /* AdWords */
 
#maia-note {} /* Maia */

Hacks

最好避免使用该死的CSS “hacks” —— 请先尝试使用其他的解决方法。

虽然它很有诱惑力，可以当作用户代理检测或特殊的CSS过滤器，但它的行为太过于频繁，会长期伤害项目的效率和代码管理，所以能用其他的解决方案就找其他的。

声明顺序

依字母顺序进行声明。

都按字母顺序声明，很容易记住和维护。

忽略浏览器的特定前缀排序，但多浏览器特定的某个CSS属性前缀应相对保持排序（例如-moz前缀在-webkit前面）。

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

声明和属性完结

所有声明都要用“;”结尾。

考虑到一致性和拓展性，请在每个声明尾部都加上分号。

在属性名冒号结束后加一个空字符。

出于一致性的原因，在属性名和值之间加一个空格。

/* 不推荐 */
.test {
    display: block;
    height: 100px
}
 
/* 推荐 */
.test {
    display: block;
    height: 100px;
}

规则分行

每个规则独立一行。

两个规则之间隔行。

html {
    background: #fff;
}
 
body {
    margin: auto;
    width: 50%;
}