一.命名规范(BEM规范)
BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。
1.1 什么是Block
在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。在BEM 中，块被写为和 class 的名字一样，如下所示：
.button {
}
.header {
}
BEM 使用 .button 而不是直接使用<button>元素的原因是因为类名具有无限的可复用性。举个例子，如果将 <button> 元素的背景颜色设置为红色，则所有 都将被强制继承红色背景。如果你要给你页面上某个按钮设置不同的颜色，你必须通过覆盖你的 <button> 元素来修复代码，这种方式不仅仅会使你的css代码杂乱无章，并且可能会让各个<button>元素之互相影响。
/* good */
.button { background-color: red; }
.button--secondary { background-color: blue; }
/* bad */
button { background-color: red; }
.parent button { background-color: blue;}
如上正确示范代码所示，如果设置了一个 .button 类的按钮，则可以在任何 <button> 元素上选择是否使用 .button 类。那么，如果你需要一个不同的背景颜色，你所做的就是改成一个新的 class，比如说 .button--secondary，而这里的--secondary，其实就是下面会讲到的修饰符（modifier）。
1.2 什么是Element
元素是块的子节点，元素表示的是目的，而不是状态。块与元素之间用一个双下划线隔开，所以，如果你看到一个例如.form__row这样的类名 ，你会马上知道 .form 块中有一个 row 元素。
/* good */
.form__row {
}
/* bad */
.form .row {
}
要特别注意的是，对于Element来说，不能脱离Block父级单独使用，如下代码所示：
/* good */
<header class="header">
<p class="header__body"></p>
</header>
/* bad */
<header>
<p class="header__body"></p>
</header>
1.3 什么是Modifier
修饰符是改变某个块的外观的标志。要使用修饰符，用一个双短横线线隔开，从上面1.1的示例中可以看到，修改的按钮将被命名为 .button--secondary,--secondary就是一个修饰符，
.header--first {
}
.header__button--selected {
}
同样要特别注意的是，对于Modifier来说，不能脱离Block和Element父级单独使用，如下代码所示：
/* good */
<p class="header">
<p class="header__body">
<button class="header__button header__button--primary"></button>
<button class="header__button header__button--default"></button>
</p>
</p>
/* bad */
<p>
<p>
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
二.属性值
2.1 数值
当数值为 0 - 1 之间的小数时，建议省略整数部分的 0。
/* good */
.panel {
opacity: .8
}
/* bad */
.panel {
opacity: 0.8
}
2.2 长度
当长度为 0 时建议省略单位。
/* good */
.list {
padding: 0 5px;
}
/* bad */
.list {
padding: 0px 5px;
}
2.3 颜色
建议不使用命名色值。
/* good */
.button--success {
color: #90ee90;
}
/* bad */
.button--success {
color: lightgreen;
5.2 字重
[强制] font-weight 属性必须使用数值方式描述。
2.4 清除浮动
建议当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
2.5 !important
除公共样式之外，在业务代码中尽量不能使用 !important
2.6 z-index
建议将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
三.字体排版
3.1 字号
因为 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。所以在 Windows 平台显示的中文内容，其字号应不小于 12px。
3.2 字重
font-weight 属性建议使用数值方式描述。
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
3.3 行高
line-height 在定义文本段落时，应使用数值。将line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置line-height。如果line-height 用于控制垂直居中，应该设置成与容器高度一致。
/* good */
.container {
line-height: 1.5;
}
/* bad */
.container {
line-height: 15px;
}
四.选择器相关
4.1 不要为 id、class 选择器添加类型选择器
既不太美观之外，同时也会影响性能。
/* good */
#error,.message {
font-color: #c00;
}
/* bad */
input#error,p.message {
font-color: #c00;
}
