font: normal 13px "Helvetica Neue", sans-serif;
书写顺序前后为：
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性 text-align vertical-align text-wrap text-transform text-indent
text-letter-spacing word-spacing white-space text-overflow
目的：
减少浏览器 reflow（回流），提升浏览器渲染 dom 的性能
原理：浏览器的渲染流程为：
1、解析 html 构建 dom 树，解析 css 构建 css 树：将 html 解析成树形的数据结构将 css 解析成树形的数据结构
2、构建 render 树：DOM 树和 CSS 树合并之后形成的 render 树。
3、布局 render 树：有了 render 树，浏览器已经知道那些网页中有哪些节点，
各个节点的 css 定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
4、绘制 render 树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css 样式解析到显示至浏览器屏幕上就发生在 234 步骤，可见浏览器并不是一获
取到 css 样式就立马开始解析而是根据 css 样式的书写顺序将之按照 dom 树的结
构分布 render 样式，完成第 2 步，然后开始遍历每个树结点的 css 样式进行解
析，此时的 css 样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一
旦浏览器发现某个元素的定位变化影响 DOM，则需要重新渲染。
11、Scss、Less 相关
每个模块应该有一个单独的 less, 然后每个最外层的父类 className 应该
写在第一位，所有子 Node 的样式都写在里面，这样是为了避免命名冲突。比如
//out: false
.parent-name{
.child-name{
...
}
...
}
LESS 嵌套最多不能超过 5 层；
不允许有空的规则；
元素选择器用小写字母；
去掉小数点前面的 0；
去掉数字中不必要的小数点和末尾的 0；
属性值'0'后面不要加单位；
同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；
无前缀的标准属性应该写在有前缀的属性后面；
不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
不要在一个文件里出现两个相同的规则；
用 border: 0; 代替 border: none;
CSS 选择器不要超过 3 层；
尽量少用'*'选择器
12、变量命名
标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到 cgi 返回的数据）
'ID'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery 对象必须以'$'开头命名
13、变量声明
一个函数作用域中所有的变量声明尽量提到函数首部，用一个 var 声明，不
允许出现两个连续的 var 声明。
14、单行注释
双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
if (condition) {
// if you made it here, then all security checks passedallowed();
}
var zhangsan = 'zhangsan'; // one space after code
15、多行注释
最少三行, '*'后跟一个空格，具体参照右边的写法；
建议在以下情况下使用：
难于理解的代码段
可能存在错误的代码段
浏览器特殊的 HACK 代码
业务逻辑强相关的代码
/*
* // 注释...
*/
var x = 1;
16、数组、对象
对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。