摘要：在規則聲明的左大括號前加上一個空格。規則聲明之間用空行分隔開。根據屬性的重要性順序書寫。因此私有在前，標準在后的寫法是考慮到了以后可能會出現的問題。且最好盡量減少沒有實際作用的冗余的屬性。

https://csswizardry.com/2013/...
https://css-tricks.com/bem-101/
https://www.smashingmagazine....
https://hackhands.com/70-Expe...

normalize   http://necolas.github.io/norm...
reset          http://html5reset.org/
http://www.zhangxinxu.com/wor...

/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 
*/

* { border: 1px solid #f00; }

/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("structure.css");

1.類名建議使用破折號代替駝峰法。如果你使用 BEM，也可以使用下劃線（參見下面的 OOCSS 和 BEM）。
2.不要使用 ID 選擇器。
3.在一個規則聲明中應用了多個選擇器時，每個選擇器獨占一行。
4.在規則聲明的左大括號 { 前加上一個空格。
5.在屬性的冒號 : 后面加上一個空格，前面不加空格。
6.規則聲明的右大括號 } 獨占一行。
7.規則聲明之間用空行分隔開。

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
 // ... 
}

1.建議使用行注釋 (在 Sass 中是 //) 代替塊注釋。
2.建議注釋獨占一行。避免行末注釋。
3.給沒有自注釋的代碼寫上詳細說明，比如：為什么用到了 z-index 兼容性處理
4.使用標志。“將樣式表分成特定的部分：全局樣式 - （正文，段落，列表等），頁眉，頁面結構，標題，文本樣式，導航，表單，注釋，附件。

出于以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：

可以幫助我們理清 CSS 和 HTML 之間清晰且嚴謹的關系。

可以幫助我們創建出可重用、易裝配的組件。

可以減少嵌套，降低特定性。

可以幫助我們創建出可擴展的樣式表。

OOCSS，也就是 “Object Oriented CSS（面向對象的CSS）”，是一種寫 CSS 的方法，其思想就是鼓勵你把樣式表看作“對象”的集合：創建可重用性、可重復性的代碼段讓你可以在整個網站中多次使用。

BEM，也就是 “Block-Element-Modifier”，是一種用于 HTML 和 CSS 類名的命名約定。BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的代碼庫和可伸縮性，BEM 就是為此而生的，并且可以作為一套遵循 OOCSS 的參考指導規范。

在 CSS 中，雖然可以通過 ID 選擇元素，但大家通常都會把這種方式列為反面教材。ID 選擇器給你的規則聲明帶來了不必要的高優先級，而且 ID 選擇器是不可重用的。

避免在 CSS 和 JavaScript 中綁定相同的類。否則開發者在重構時通常會出現以下情況：輕則浪費時間在對照查找每個要改變的類，重則因為害怕破壞功能而不敢作出更改。
我們推薦在創建用于特定 JavaScript 的類名時，添加 .js- 前綴：
Request to Book

屬性聲明的排序
首先列出除去 @include 和嵌套選擇器之外的所有屬性聲明。緊隨后面的是 @include，這樣可以使得整個選擇器的可讀性更高

不要讓嵌套選擇器的深度超過 3 層！

如果有必要_用到嵌套選擇器，把它們放到最后，在規則聲明和嵌套選擇器之間要加上空白，相鄰嵌套選擇器之間也要加上空白。嵌套選擇器中的內容也要遵循上述指引。

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

變量名應使用破折號（例如 $my-variable）代替 camelCased 和 snake_cased 風格。對于僅用在當前文件的變量，可以在變量名之前添加下劃線前綴（例如 $_my-variable）

按照css的性質和用途，我們可以將css文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，并以此為順序引用。那么他們分別是什么呢？

公共型樣式是最為重要的部分，對于比較小的項目，我們只引入一個css，這個css的樣式即公共型樣式，一般包括：“標簽的重置和設置默認值”（以消除不同瀏覽器之間的差異）、“統一調用背景圖和清除浮動或其他需統一處理的長樣式（這樣就無需對每個進行分別的處理）”、“網站通用布局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。后面會具體介紹。

特殊型樣式即對某個維護率較高的欄目或者某個與網站整體差異較大的頁面獨立引入這樣一個特殊型樣式，方便我們維護。

皮膚型樣式即產品需要換膚功能，那么我們就需要將顏色、背景等抽離出來放在這里，方便管理。

css文件我們分為了公共型樣式、特殊型樣式、皮膚型樣式，那么在css文件的內部我們又是怎么分類的呢？（此部分為重點）?

重置和默認的css代碼。
這是為了消除默認樣式和瀏覽器的差異，并設置部分標簽的初始樣式，以減少后面的重復勞動。?你可以根據自己的網站需求設置，這一部分代碼放在css內部的最上面。

統一處理的css代碼。?這里可以統一調用背景圖和清除浮動（指通用性較高的布局、模塊、原件內的清楚）

布局（grid）: 我們將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等。常用！

模塊（module）：即語義化的可以重復使用的較大的整體。如導航、登陸、注冊、列表、評論、搜索等。常用！

元件（unit）：通常是一個不可再分的較為小巧的個體，被重復用于各種模塊中，比如按鈕、輸入框、loading、圖表等。常用！

功能（function）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動。不常用，不可濫用！

皮膚（skin）：對于換膚型網站需要使用，將皮膚型的樣式抽離出來，非換膚型網站不可濫用，不常用。

狀態(state):即一些狀態類樣式。不常用。

1.選擇器、屬性和值都是用小寫。

這一點非常關鍵：根據xhtml規范，所有的標簽屬性和值都要使用小寫形式，而我們知道xhtml更為標準，所以最好遵循之，這樣，選擇器必須小寫就是十分必要的了。既然這樣我們就不能使用駝峰式寫法來寫類名了，如class="u-leftArrow"實際上就是不規范的了，最好寫成class="u-left_arrow"，也可以表達相同的意思。

2.單行寫完一個選擇器定義。

優點：便于選擇器的尋找和閱讀，也便于插入新的選擇器和編輯，便于模塊等的識別。更重要的是可以去除多余空格，使代碼緊湊減少換行。試想，如果每一行只有一個屬性名和屬性值，那么對于一個大項目而言，就很難做到選擇器的尋找和閱讀了，而使用一行寫完一個選擇器，那么就有可能縮短為1/6到1/10，這還是非常客觀的。

3.最后一個值也要一分號結尾。

實際上，在大括號結束前的值可以省略分號，但是這樣做會對修改、添加和維護工作帶來不必要的失誤和麻煩。比如，在最后添加一個屬性，如果之前沒有在末尾添加分號，那么你就要在新添加的屬性前添加分號，否則就會出錯

4.省略值為0的單位

優點：可以節省不必要的字節同時也為了方便閱讀，我們將0px、0em、0%等都縮寫為0

5.使用16進制表示顏色值，其中的字母使用大寫形式，并盡量縮寫。

除非在你需要透明度而使用rgba，否則都是用#FFFFFF這樣的寫法，并盡量縮寫，如#FFF。使用大寫形式，是因為這樣更加具有易讀性，且有利于壓縮，而縮寫為了減少不必要的字節。

6.根據屬性的重要性順序書寫。

　只遵循橫向順序即可，即先書寫定位布局類屬性，在書寫盒模型等自身屬性，最后書寫文本類及修飾類屬性。?另外，如果屬性間存在關聯性，則不要隔開寫
height和line-height具有關聯性，我們盡量不要分開寫。

7.私有在前，標準在后。

　先寫帶有瀏覽器私有標志的屬性，后寫W3C標準的屬性。因為私有的屬性，說明瀏覽器自身還沒有規范化，標準屬性是用不了的。若某一天該瀏覽器的屬性規范化了，那么說明標準屬性可以使用了，而如果我們先寫W3C標準屬性，最后寫私有屬性，就有可能導致私有屬性覆蓋標準屬性。因此私有在前，標準在后的寫法是考慮到了以后可能會出現的問題。

8.選擇器等級

!important>行內樣式style>id選擇器>類、偽類和屬性選擇器>標簽選擇器和偽元素選擇器

9.css內部的順序

　我認為，對于一個網頁而言，我們在寫css時，可以分為幾個部分來寫，比如header部分的css代碼，main部分的css代碼，部分之間通過空格隔開并給以響應的注釋，這樣更有利于我們的閱讀和后期的維護

10.優化方案：對于可以縮寫的值我們盡量采用縮寫形式，這樣有利于減小css文件大小，并增加可讀性和可維護性。且最好盡量減少沒有實際作用的冗余的屬性。有時我們會將定義相同的或者有大部分屬性值相同的一系列的選擇器組合到一起（采用逗號的方法）來統一定義，這樣可以為你節省很多字節和寶貴時間。

10.類選擇器的命名建議
　在前面說到，命名className時，應當以其作用、功能來命名，而不要使用沒有語義化或者以顏色、左右空間位置的文字來命名。

　1.　對于布局，即用.g-作為前綴，通常有以下推薦的寫法。
　　頭部： header或head
　　主體： body
　　尾部：footer或foot
　　主欄： main
　　側欄：side
　　盒容器： wrap或box
　　主欄子容器：mainc
　側欄子容器：sidec
　2.對于模塊，即.m-作為前綴。元件，.u-作為前綴，通常有下面推薦的寫法。
　　導航： nav
　　子導航：subnav
　　菜單：menu
　　選項卡：tab
　　標題區：head或title
　　內容區：body或content
　　列表：list
　　表格：table
　　表單：form
　　排行：top
　　熱點：hot
　　登錄：login
　　標志：logo
　　廣告：adervertise
　　搜索：search
　　幻燈：slide
　　幫助：help
　　新聞：news
　　下載：download
　　注冊：register或regist
　　投票：vote
　　版權:copyright
　　結果：result
　　按鈕：button
　　輸入：input
　3.對于功能，即以.f-為前綴，通常推薦如下：
　　清除浮動：clearboth
　　向左浮動：floatleft
　　向右浮動: floatright
　　溢出隱藏：overflowhidden
　4.對于顏色，即以.s-為前綴，通常推薦如下：
　　字體顏色：fontcolor
　　背景：background
　　背景顏色：backgroundcolor
　　背景圖片：backgroundimage
　　背景定位：backgroundposition
　　邊框顏色：bordercolor
　5.對于狀態，即以.z-為前綴，通常推薦如下：
　　選中:selected
　　當前：current
　　顯示：show
　　隱藏：hide
　　打開：open
　　關閉:close
　　出錯：error
　　不可用:disabled

參考文章
https://www.cnblogs.com/zhuzh...