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

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

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

編碼設(shè)置

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

@charset"utf-8";

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

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

/*字符編碼*/

@charset"utf-8";

html,

body{

height:100 %;

}

@charset"utf-8";

命名空間規(guī)范

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

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

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

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

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

命名空間思想

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

不建議使用下劃線_進(jìn)行連接

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

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

字符小寫

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

選擇器

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

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

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

.g-content~.g-footer{

}

命名短且語義化良好

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