# 通用約定
## 代碼組織
* 以組件為單位組織代碼段；
* 制定一致的注釋規范；
* `組件塊和子組件塊`以及`聲明塊`之間使用**一空行**分隔，`子組件塊`之間**三空行**分隔；
* 如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動；
良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構建它們的方法。不要讓你的團隊其它成員 來猜測一段不通用或不明顯的代碼的目的。
提示：通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。
~~~
/* ==========================================================================
組件塊
============================================================================ */
/* 子組件塊
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子組件塊
============================================================================ */
.selector-secondary {
display: block; /* 注釋*/
}
.selector-three {
display: span;
}
~~~
## Class 和 ID
* 使用語義化、通用的命名方式；
* 使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；
* 避免選擇器嵌套層級過多，盡量少于 3 級；
* 避免選擇器和 Class、ID 疊加使用；
出于[性能考量](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/)，在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用。
元素選擇器和 ID、Class 混合使用也違反關注分離原則。如果HTML標簽修改了，就要再去修改 CSS 代碼，不利于后期維護。
~~~
/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}
/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}
~~~
## 聲明塊格式
* 選擇器分組時，保持獨立的選擇器占用一行；
* 聲明塊的左括號?`{`?前添加一個空格；
* 聲明塊的右括號?`}`?應單獨成行；
* 聲明語句中的?`:`?后應添加一個空格；
* 聲明語句應以分號?`;`?結尾；
* 一般以逗號分隔的屬性值，每個逗號后應添加一個空格；
* `rgb()`、`rgba()`、`hsl()`、`hsla()`?或?`rect()`?括號內的值，逗號分隔，但逗號后不添加一個空格；
* 對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，`.5`?代替?`0.5`；`-.5px`?代替`-0.5px`）；
* 十六進制值應該全部小寫和盡量簡寫，例如，`#fff`?代替?`#ffffff`；
* 避免為 0 值指定單位，例如，用?`margin: 0;`?代替?`margin: 0px;`；
~~~
/* Not recommended */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Recommended */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
~~~
## 聲明順序
相關屬性應為一組，推薦的樣式編寫順序
1. Positioning
2. Box model
3. Typographic
4. Visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。
其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。
~~~
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}
~~~
## 引號使用
`url()`?、屬性選擇符、屬性值使用雙引號。 參考?[Is quoting the value of url() really necessary?](http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary)
~~~
/* Not recommended */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
/* Recommended */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
.selector[type="text"] {
}
~~~
## 媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。
~~~
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
~~~
## 不要使用?`@import`
與?`<link>`?相比，`@import`?要慢很多，不光增加額外的請求數，還會導致不可預料的問題。
替代辦法：
* 使用多個?元素；
* 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件；
* 其他 CSS 文件合并工具；
參考?[don’t use @import](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)；
## 鏈接的樣式順序：
`a:link -> a:visited -> a:hover -> a:active（LoVeHAte）`
## 無需添加瀏覽器廠商前綴
使用?[Autoprefixer](https://github.com/postcss/autoprefixer)?自動添加瀏覽器廠商前綴，編寫 CSS 時不需要添加瀏覽器前綴，直接使用標準的 CSS 編寫。
Autoprefixer 通過?[Can I use](http://caniuse.com/)，按兼容的要求，對相應的 CSS 代碼添加瀏覽器廠商前綴。
