## 1. 基本
* 缩进使用soft tab（4个空格）
* 每个属性声明末尾都要加分号。
* 类名使用小写字母，以中划线分隔
* id采用驼峰式命名
* scss中的变量、函数、混合、placeholder采用驼峰式命名
~~~
.element {
position: absolute;
top: 10px;
left: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
}
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 混合 */
@mixin centerBlock {
...
}
~~~
## 2. 空行
* 文件最后保留一个空行
* ‘}’后最好有一个空行，包括scss中的嵌套规则
* 属性之间需要适当的空行
~~~
.element {
...
}
/*'}'后空行*/
.dialog {
color: red;
/*属性之间适当空行*/
&:after {
...
}
}
/*文档最后空行*/
~~~
## 3. 换行
* ‘{’前不要换行
* ‘{’后和‘}’前换行
* 每个属性独占一行
* 多个规则的分隔符‘，’后需要换行
~~~
.element {
color: red;
background-color: black;
}
.element,
.dialog {
...
}
~~~
## 4. 注释
* 注释统一使用 '/**/'不要使用'//'
* 缩进与下一行代码保持一致
* 注释位于代码行的上方
~~~
/* Modal header */
.modal-header {
...
}
/*
* Modal header
*/
.modal-header {
...
}
.modal-header {
/* 50px */
width: 50px;
color: red;
}
~~~
## 5. 属性声明顺序参考和分组方案
~~~
.declaration-order {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
opacity: 1;
}
~~~
## 6. 属性简写
#### 常用的属性可以使用简写
* margin
* padding
* font
* background
#### 其他的建议分开声明，显示更加清晰
## 7. SCSS相关
* 提交代码不要有@debug
* @import引入的文件不需要开头的'_'和结尾的'.SCSS'
* 嵌套最多不超过5层
* 去掉不必要的父级引用符号'&'
* 尽量少用'*'选择器
