優雅地寫css

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

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