https://csswizardry.com/2013/…
https://css-tricks.com/bem-101/
https://www.smashingmagazine….
https://hackhands.com/70-Expe…
重置你的CSS樣式
normalize http://necolas.github.io/norm…
reset http://html5reset.org/
http://www.zhangxinxu.com/wor…
使用CSS常量進行更快速的開發。
/*
# 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");
<style type="text/css" media="Screen">
@import url("css/master.css");
</style>格式
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
出於以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：
- 可以幫助我們理清 CSS 和 HTML 之間清晰且嚴謹的關係。
- 可以幫助我們建立出可重用、易裝配的元件。
- 可以減少巢狀，降低特定性。
- 可以幫助我們建立出可擴充套件的樣式表。
OOCSS，也就是 “Object Oriented CSS（物件導向的CSS）”，是一種寫 CSS 的方法，其思想就是鼓勵你把樣式表看作“物件”的集合：建立可重用性、可重複性的程式碼段讓你可以在整個網站中多次使用。
BEM，也就是 “Block-Element-Modifier”，是一種用於 HTML 和 CSS 類名的命名約定。BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的程式碼庫和可伸縮性，BEM 就是為此而生的，並且可以作為一套遵循 OOCSS 的參考指導規範。
儘量不要使用ID 選擇器！！！
在 CSS 中，雖然可以通過 ID 選擇元素，但大家通常都會把這種方式列為反面教材。ID 選擇器給你的規則宣告帶來了不必要的高優先順序，而且 ID 選擇器是不可重用的。
JavaScript 鉤子
避免在 CSS 和 JavaScript 中繫結相同的類。否則開發者在重構時通常會出現以下情況：輕則浪費時間在對照查詢每個要改變的類，重則因為害怕破壞功能而不敢作出更改。
我們推薦在建立用於特定 JavaScript 的類名時，新增 .js- 字首：
<button class=”btn btn-primary js-request-to-book”>Request to Book</button>
Sass
屬性宣告的排序
首先列出除去 @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內部的最上面。 - 統一處理的css程式碼。 這裡可以統一呼叫背景圖和清除浮動（指通用性較高的佈局、模組、原件內的清楚）
- 佈局（grid）: 我們將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等。常用！
- 模組（module）：即語義化的可以重複使用的較大的整體。如導航、登陸、註冊、列表、評論、搜尋等。常用！
- 元件（unit）：通常是一個不可再分的較為小巧的個體，被重複用於各種模組中，比如按鈕、輸入框、loading、圖表等。常用！
- 功能（function）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動。不常用，不可濫用！
- 皮膚（skin）：對於換膚型網站需要使用，將皮膚型的樣式抽離出來，非換膚型網站不可濫用，不常用。
- 狀態(state):即一些狀態類樣式。不常用。
css程式碼格式
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