可能不同團(tuán)隊(duì)都有各自的規(guī)范,又或者很多人在寫CSS的時候還是想到什么就寫什么,不存在太多的約束。
我覺得CSS代碼規(guī)范還是有存在的必要的,尤其是在團(tuán)隊(duì)配合,多人協(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這種命名過于嚴(yán)苛及樣式名過長過丑的規(guī)則,采取了一種比較折中的方案。
不建議使用下劃線_進(jìn)行連接
節(jié)省操作,輸入的時候少按一個shift鍵
能良好區(qū)分JavaScript變量命名
字符小寫
定義的選擇器名,屬性及屬性值的書寫皆為小寫。
選擇器
當(dāng)一個規(guī)則包含多個選擇器時,每個選擇器獨(dú)占一行。
、+、~、>選擇器的兩邊各保留一個空格。
.g-header>.g-header-des,
.g-content~.g-footer{
}
命名短且語義化良好
對于選擇器的命名,盡量簡潔且具有語義化,不應(yīng)該出現(xiàn)g-abc這種語義模糊的命名。