1. 命名规范
建议只使用类选择器，class 应以功能或内容命名，单词小写，多个单词时用中划线（-）连接
2. 格式规范
统一使用两个空格缩进；
属性声明结尾加分号；
选择器与左括号之间一个空格，属性冒号后一个空格；
不要为 0 指明单位；
颜色值能用简写的尽量用简写；(例如：#FFFFFF写成#FFF)
3. 注释规范
以页面模块为单位组织代码段，模块与模块之间的样式代码使用一空行分隔，并用/* */格式对代码进行注释
4. 公共样式引入
尽量避免公共样式的重复书写，熟悉公共样式
5. 样式声明顺序
CSS 属性顺序规范有助于提高代码可读性，便于发现代码问题。
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。
盒模型决定了组件的尺寸和位置，因此排在第二位。其他属性只是影响组件的内部（inside）或者是不影响前两组属性
因此可使用下列顺序进行书写
1. 定位属性（position、display、float、left、right）
1. 尺寸属性（width、height、padding、margin、border）
1. 字体属性（color、font、text-align）
1. 其他属性（background、cursor、outline）
.test { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-size: 12px; color: #333; background: rgba(0, 0, 0, 0.5); border-radius: 10px; }
6. 小程序统一使用saas语法书写样式，需要加上scoped样式隔离，不需要样式隔离的页面样式可新建一个style标签书写
<style scoped lang='scss'>
</style>
<style></style>
7. 行长度
每行不得超过 120 个字符，除非单行不可分割。 常见不可分割的场景为URL超长。
对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。
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))
);
8.多个选择器共用一个样式，建议写成一个当前页面的公共样式
.post, .page, .comment { line-height: 1.5; }
.txt-height { line-height: 1.5; }
9.属性缩写
在可以使用缩写的情况下，尽量使用属性缩写。
.post {
font: 12px/1.5 arial, sans-serif;
}
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
10. 小数的书写
当数值为 0 - 1 之间的小数时，省略整数部分的 0。
panel { opacity: .8; }
panel { opacity: 0.8; }
