* 约定： 以下事例代码中所用单位均为 rem ，关于 rem 单位的使用可参照 《移动端web app自适应布局探索与总结》
1 命名
1.1 文件命名
常用的文件命名：
全局：global.css
结构：layout.css
模块：module.css
主题：themes.css
较长文件名必须以 - 中横杠符连接，项目里面的私有样式文件：项目名-业务模块名称.css。
例:
/* 项目名为clout */
/* good */
clout-home.css
/* bad */
cloutHome.css;
1.2 选择器命名
（重要）在不是必须的情况下尽可能不用id选择器。
选择器名字全小写，不得使用大写。
较长选择器名字之间使用
-中横杆连接。当判断容易出现命名冲突的时候，命名需按规则：模块名-你的选择器名，如果出现多层级选择器的情况（应尽量避免超过3级的情况），每个层级间使用
-中横杆连接，不建议直接使用嵌套。
例：
/* 选择器名称 */
/* good */
.mydialog {
font-size: .28rem;
}
/* bad */
.myDialog {
font-size: .28rem;
}
/* 模块及嵌套 */
/* good */
<div class="mydialog">
<div class="mydialog-hd">
<p class="mydialog-hd-title">标题</p>
</div>
</div>
.mydialog-hd-title {
color: #3f3f3f;
}
/* bad */
<div class="mydialog">
<div class="hd">
<p class="title">标题</p>
</div>
</div>
.mydialog .hd .title {
color: #3f3f3f;
}（建议）常用的选择器命名：
头部：header（hd）
标题：title
内容：container/content（cont）
页面主题：body（bd）/main
尾部：footer（ft）
导航：nav
子导航：subnav
标签页：tab
侧栏：sidebar
栏目：column/col
外围控制布局：wrapper
左中右：left center right
菜单：menu
子菜单：submenu
列表：list
当前的：active
图标：icon
提示信息：msg
小技巧：tips
2 代码风格
2.1 缩进
（重要）统一使用 4 个空格缩进，不得使用 tab 和 2 个空格（没规范前的缩进方式不管）。
2.2 空格
（重要）选择器跟 { 之间必须包含空格。
例：
/* good */
.selector {
}
/* bad */
.selector{
}（重要）属性跟 : 之间不能有空格，: 跟属性值之间必须包含空格。
例：
/* good */
.selector {
color: #3f3f3f;
}
/* bad */
.selector {
color:#3f3f3f; /* 或 color : #3f3f3f; */
}（重要） >、+、~选择器的两边各保留一个空格。
例：
/* good */
.header > .title {
padding: .1rem;
}
label + input {
margin-left: .04rem;
}
input:checked ~ .input-face {
background-color: #ccc;
}
/* bad */
.header>.title {
padding: .1rem;
}
...
...2.3 换行
（重要）一个rule中有多个选择器时，选择器间必须换行。
例：
/* good */
p,
div,
input,
textarea {
font-size: .28rem;
}
/* bad */
p, div, input, textarea {
font-size: .28rem;
}（重要）属性值之间必须换行。
例：
/* good */
.content {
padding: .1rem;
color: #3f3f3f;
}
/* bad */
.content {
padding: .1rem; color: #3f3f3f;
}（建议）对于超长的样式属性值，可在 空格 或 , 处换行。
例：
.selector {
bakcground:
url(veryveryveryveryveryLongUrlHere/image/icon.png)
no-repeat 0 0;
}
.selector {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(88,94,124)),
color-stop(0.52, rgb(115,123,162))
)
}2.4 行长度
（重要） 每行不得超过 120 个字符，除非单行不可分割（例如url超长）。
3 值与单位
3.1 文本
（重要）文本内容必须用双引号包围。
例：
/* good */
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
/* bad */
body {
font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
}3.2 数值
（重要）数值为 0 – 1 之间的小数，省略整数部分的 0 。
例：
/* good */
body {
font-size: .28rem;
}
/* bad */ {
font-size: 0.28rem;
}3.3 单位
（重要）数值为 0 的属性值须省略单位。
例：
/* good */
body {
padding: 0 .1rem;
}
/* bad */
body {
padding: 0rem .1rem;
}3.4 url()
（重要） url() 函数中的路径不加引号
例：
/* good */
body {
background: url(bg.png);
}
/* bad */
body {
background: url("bg.png");
}（建议） url() 函数中的绝对路径可省去协议名
例：
/* good */
body {
background: url(//yunzhijia.com/images/bg.png);
}
/* bad */
body {
background: url(http://yunzhijia.com/images/bg.png);
}3.5 颜色
（重要）RGB颜色值必须使用十六进制形式 #3f3f3f。不允许使用 rgb()。
解释：
带有alpha（不透明度）的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后须保留一个空格。
例：
/* good */
.border {
border: 1px solid #dce1e8;
}
.overlayer {
background-color: rgba(0, 0, 0, .7);
}
/* bad */
.border {
border: 1px solid rgb(220, 225, 232);
}
.overlayer {
background-color: rgba(0,0,0,.7);
}（重要）颜色值可缩写时，须使用缩写形式。
例：
/* good */
.text-grey {
color: #ccc;
}
/* bad */
.text-grey {
color: #cccccc;
}（重要）颜色值不可使用颜色单词。
例：
/* good */
.text-red {
color: #f00;
}
/* bad */
.text-red {
color: red;
}（建议）颜色值中的英文字母使用小写，如果采用大写字母，则必须保证同一项目内是一致的。
例：
/* good */
.border-color {
border-color: #dce1e8;
}
/* bad */
.border-color {
border-color: #DCE1E8;
}4 通用
4.1 选择器
（重要）DOM节点 id、class 属性赋值时 = 之间不得有空格，属性值必须用双引号包围，不得用单引号。
例：
/* good */
<div class="container" id="container">
</div>
/* bad */
<div class = "container" id='container'>
</div>（重要）如无必要，尽量不使用 id 选择器，给 id、class 选择器设置属性时不需要添加类型选择器进行限定。
例：
/* good */
#footer,
.container {
background-color: #fff;
}
/* bad */
div#footer,
div.container {
background-color: #fff;
}（重要） id 选择器不需嵌套其他选择器。
例：
<div class="footer">
<span id="tips">提示语</span>
</div>
/* good */
#tips {
color: #bdbdbd;
}
/* bad */
.footer #tips {
color: #bdbdbd;
}4.2 属性缩写
（建议）在可以使用缩写的情况下，尽量使用属性缩写。
例：
/* good */
body {
font: .28rem/1.25 Helvetica;
}
/* bad */
body {
font-family: Helvetica;
font-size: .28rem;
line-height: 1.25;
}（建议）使用 border、margin、padding 等缩写时，应注意确实需要设置多个方向的值时才使用缩写，避免其他方向的有用值被覆盖掉
例：
<div class="wrap list-wrap">
</div>
.wrap {
padding: .1rem;
border: 1px solid #dce1e8;
}
/* good */
.list-wrap {
padding-left: .2rem;
padding-right: .2rem;
border-color: #ccc;
}
/* bad */
.list-wrap {
padding: .2rem .1rem;
border: 1px solid #ccc;
}4.3 属性书写顺序
（建议）按如下顺序书写，摘自http://www.zhihu.com/question/19586885/answer/48933504
位置属性(position, top, right, z-index,display, float, overflow 等)
大小(width, height, padding, margin, border)
文字系列(font, line-height, letter-spacing,color- text-align等)
视觉(background, color, list-style等)
其他(animation, transition等)
例：
.footer-fixed {
position: fixed;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: .5rem;
padding: .1rem;
border: 1px solid #dce1e8;
box-sizing: border-box;
font-size: .28rem;
line-height: 1.25;
background: #e9ecf1;
color: #3f3f3f;
-webkit-transition: color .5s;
-moz-transition: color .5s;
transition: color .5s;
}4.4 变换与动画
（重要） 使用 transition 时应指定 transiton-property，不用 all。
例：
/* good */
.tab {
transition: color 1s, background-color: 1s;
}
/* bad */
.tab {
transition: all 1s;
}4.5 属性前缀
（建议）属性的私有前缀按长到短排列，按 : 对其
例：
/* good */
.tab {
-webkit-transition: color .5s;
-moz-transition: color .5s;
transition: color .5s;
}
/* bad */
.tab {
-webkit-transition: color .5s;
-moz-transition: color .5s;
transition: color .5s;
}