#通用約定
---
###代碼組織
* 以組件和布局為單位組織代碼段；
* 組件塊和布局文件各自一個文件；
* 頁面由多個布局文件和組件加上當前頁面獨有的樣式組成；
* 每個文件頂部需要有此模塊的注釋
```css
/*----------------------------------------------------------------------
組件描述
-----------------------------------------------------------------------*/
```
目錄結構可以參見：[目錄結構和文件命名](目錄結構和文件命名.md)
###命名
* 類名使用小寫字母，以中劃線分隔
* id采用駝峰式命名（盡量不使用id來設置樣式）
* scss中的變量、函數、混合、placeholder采用駝峰式命名
```css
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 變量 */
$colorBlack: #000;
/* 函數 */
@function pxToRem($px) {
...
}
/* 混合 */
@mixin centerBlock {
...
}
/* placeholder */
%myDialog {
...
}
```
###縮進
使用soft tab（4個空格）。
```css
.element {
position: absolute;
top: 10px;
left: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
}
```
###分號
每個屬性聲明末尾都要加分號。
```css
.element {
width: 20px;
height: 20px;
background-color: red;
}
```
###空格
以下幾種情況不需要空格：
* 屬性名后
* 多個規則的分隔符','前
* !important '!'后
* 屬性值中'('后和')'前
* 行末不要有多余的空格
以下幾種情況需要空格：
* 屬性值前
* 選擇器'>', '+', '~'前后
* '{'前
* !important '!'前
* @else 前后
* 屬性值中的','后
* 注釋'/*'后和'*/'前
```css
/* not good */
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/* good */
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
/* not good */
.element ,
.dialog{
...
}
/* good */
.element,
.dialog {
}
/* not good */
.element>.dialog{
...
}
/* good */
.element > .dialog{
...
}
/* not good */
.element{
...
}
/* good */
.element {
...
}
/* not good */
@if{
...
}@else{
...
}
/* good */
@if {
...
} @else {
...
}
```
###空行
以下幾種情況需要空行：
* 文件最后保留一個空行
* '}'后最好跟一個空行
* scss中嵌套的規則
* 屬性之間需要適當的空行，具體見[屬性聲明順序](CSS/屬性聲明順序.md)
```css
/* not good */
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
/* good */
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
```
###換行
以下幾種情況不需要換行：
* '{'前
以下幾種情況需要換行：
* '{'后和'}'前
* 每個屬性獨占一行
* 多個規則的分隔符','后
```css
/* not good */
.element
{color: red; background-color: black;}
/* good */
.element {
color: red;
background-color: black;
}
/* not good */
.element, .dialog {
...
}
/* good */
.element,
.dialog {
...
}
```
###注釋
注釋統一用'/* */'（scss中也不要用'//'），具體參照下面的寫法；
縮進與下一行代碼保持一致；
可位于一個代碼行的末尾，與代碼間隔一個空格。
```css
/* Modal header */
.modal-header {
...
}
/*
* Modal header
*/
.modal-header {
...
}
.modal-header {
/* 50px */
width: 50px;
color: red; /* color red */
}
```
###引號
最外層統一使用雙引號；
url的內容要用引號；
屬性選擇器中的屬性值需要引號。
```css
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
```
###屬性簡寫
屬性簡寫需要你非常清楚屬性值的正確順序，而且在大多數情況下并不需要設置屬性簡寫中包含的所有值，所以建議盡量分開聲明會更加清晰；
<font color=red>margin</font> 和 <font color=red>padding</font> 相反，需要使用簡寫；
常見的屬性簡寫包括：
* <font color=red>font
* <font color=red>background
* <font color=red>transition
* <font color=red>animation
```
/* not good */
.element {
transition: opacity 1s linear 2s;
}
/* good */
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}
```
###媒體查詢
盡量將媒體查詢的規則靠近與他們相關的規則，不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣做只會讓大家以后更容易忘記他們。
```
.element {
...
}
.element-avatar{
...
}
@media (min-width: 480px) {
.element {
...
}
.element-avatar {
...
}
}
```
###雜項
* 不允許有空的規則；
* 元素選擇器用小寫字母（盡量不使用元素選擇器）；
* 去掉小數點前面的0；
* 去掉數字中不必要的小數點和末尾的0；
* 屬性值'0'后面不要加單位；
* 同個屬性不同前綴的寫法需要在垂直方向保持對齊，具體參照右邊的寫法；
* 無前綴的標準屬性應該寫在有前綴的屬性后面；
* 不要在同個規則里出現重復的屬性，如果重復的屬性是連續的則沒關系；
* 不要在一個文件里出現兩個相同的規則；
* 用 ```border: 0;``` 代替 ```border: none;```；
* 選擇器不要超過4層（在scss中如果超過4層應該考慮用嵌套的方式來寫）；
* 發布的代碼中不要有 ```@import```；
* 盡量少用```'*'```選擇器
```css
/* not good */
.element {
}
/* not good */
LI {
...
}
/* good */
li {
...
}
/* not good */
.element {
color: rgba(0, 0, 0, 0.5);
}
/* good */
.element {
color: rgba(0, 0, 0, .5);
}
/* not good */
.element {
width: 50.0px;
}
/* good */
.element {
width: 50px;
}
/* not good */
.element {
width: 0px;
}
/* good */
.element {
width: 0;
}
/* not good */
.element {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: linear-gradient(to bottom, #fff 0, #eee 100%);
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}
/* good */
.element {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
background: linear-gradient(to bottom, #fff 0, #eee 100%);
}
/* not good */
.element {
color: rgb(0, 0, 0);
width: 50px;
color: rgba(0, 0, 0, .5);
}
/* good */
.element {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, .5);
}
```
