編碼設(shè)置

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

@charset "utf-8";

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

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

命名空間規(guī)范

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

•狀態(tài)：以 s 為命名空間，表示動(dòng)態(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)苛及樣式名過長(zhǎng)過丑的規(guī)則，采取了一種比較折中的方案。

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

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

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

字符小寫

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

選擇器

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

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

命名短且語(yǔ)義化良好

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

規(guī)則聲明塊

•當(dāng)規(guī)則聲明塊中有多個(gè)樣式聲明時(shí)，每條樣式獨(dú)占一行。

•在規(guī)則聲明塊的左大括號(hào) { 前加一個(gè)空格。

•在樣式屬性的冒號(hào) : 后面加上一個(gè)空格，前面不加空格。

•在每條樣式后面都以分號(hào) ; 結(jié)尾。

•規(guī)則聲明塊的右大括號(hào) } 獨(dú)占一行。

•每個(gè)規(guī)則聲明間用空行分隔。

•所有最外層引號(hào)使用單引號(hào) ‘ 。

•當(dāng)一個(gè)屬性有多個(gè)屬性值時(shí)，以逗號(hào) , 分隔屬性值，每個(gè)逗號(hào)后添加一個(gè)空格，當(dāng)單個(gè)屬性值過長(zhǎng)時(shí)，每個(gè)屬性值獨(dú)占一行。

完整示例如下：

數(shù)值與單位

•當(dāng)屬性值或顏色參數(shù)為 0 – 1 之間的數(shù)時(shí)，省略小數(shù)點(diǎn)前的 0 。color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);