web前端CSS代碼的書寫規(guī)范

可能不同團隊都有各自的規(guī)范，又或者很多人在寫CSS的時候還是想到什么就寫什么，不存在太多的約束。

我覺得CSS代碼規(guī)范還是有存在的必要的，尤其是在團隊配合，多人協(xié)作下，規(guī)范就顯得尤為重要。

編碼設(shè)置

采用UTF-8編碼，在CSS代碼頭部使用：

@charset"utf-8";

注意，必須要定義在CSS文件所有字符的前面（包括編碼注釋），@charset才會生效。

例如，下面的例子都會使得@charset失效：

/*字符編碼*/

@charset"utf-8";

html,

body{

height:100 %;

}

@charset"utf-8";

命名空間規(guī)范

布局：以g為命名空間，例如：.g-wrap、.g-header、.g-content。

狀態(tài)：以s為命名空間，表示動態(tài)的、具有交互性質(zhì)的狀態(tài)，例如：.s-current、s-selected。

工具：以u為命名空間，表示不耦合業(yè)務(wù)邏輯的、可復(fù)用的的工具，例如：u-clearfix、u-ellipsis。

組件：以m為命名空間，表示可復(fù)用、移植的組件模塊，例如：m-slider、m-dropMenu。

鉤子：以j為命名空間，表示特定給JavaScript調(diào)用的類名，例如：j-request、j-open。

命名空間思想

沒有選擇BEM這種命名過于嚴苛及樣式名過長過丑的規(guī)則，采取了一種比較折中的方案。

不建議使用下劃線_進行連接

節(jié)省操作，輸入的時候少按一個shift鍵

能良好區(qū)分JavaScript變量命名

字符小寫

定義的選擇器名，屬性及屬性值的書寫皆為小寫。

選擇器

當(dāng)一個規(guī)則包含多個選擇器時，每個選擇器獨占一行。

、+、~、>選擇器的兩邊各保留一個空格。

.g-header>.g-header-des,

.g-content~.g-footer{

}

命名短且語義化良好

對于選擇器的命名，盡量簡潔且具有語義化，不應(yīng)該出現(xiàn)g-abc這種語義模糊的命名。