## 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層
* 去掉不必要的父級引用符號'&'
* 盡量少用'*'選擇器
