我們?cè)谑褂肅SS時(shí)可能由于是不同的團(tuán)隊(duì)，所以有各自的規(guī)范，又或者很多人在寫(xiě) CSS 的時(shí)候還是想到什么就寫(xiě)什么，不存在太多的約束。但必須要說(shuō)明的是CSS代碼規(guī)范還是有存在的必要的，尤其是在團(tuán)隊(duì)配合，多人協(xié)作下，規(guī)范就顯得尤為重要。本文我們?yōu)榇蠹铱偨Y(jié)了實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的CSS樣式書(shū)寫(xiě)規(guī)范，希望大家能夠在撰寫(xiě)CSS代碼時(shí)規(guī)范自己的CSS樣式。

1.編碼設(shè)置

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

@charset "utf-8";

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

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

/* 字符編碼 */

@charset "utf-8";

html,

body {

  height: 100%;

}

@charset "utf-8";

2.命名空間規(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。

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

3.選擇器

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

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

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

.g-content ~ .g-footer {

}

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

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

4.規(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è)屬性值過(guò)長(zhǎng)時(shí)，每個(gè)屬性值獨(dú)占一行。

5.數(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);

當(dāng)長(zhǎng)度值為 0 時(shí)省略單位。

margin: 0px auto

margin: 0 auto

十六進(jìn)制的顏色屬性值使用小寫(xiě)和盡量簡(jiǎn)寫(xiě)。

color: #ffcc00

color: #fc0

6.樣式屬性順序

單個(gè)樣式規(guī)則下的屬性在書(shū)寫(xiě)時(shí)，應(yīng)按功能進(jìn)行分組，并以 Positioning Model > Box Model > Typographic > Visual 的順序書(shū)寫(xiě)，提高代碼的可讀性。

如果包含 content 屬性，應(yīng)放在最前面；

Positioning Model 布局方式、位置，相關(guān)屬性包括：position / top / right / bottom / left / z-index / display / float / ...

Box Model 盒模型，相關(guān)屬性包括：width / height / padding / margin / border / overflow / ...

Typographic 文本排版，相關(guān)屬性包括：font / line-height / text-align / word-wrap / ...

Visual 視覺(jué)外觀，相關(guān)屬性包括：color / background / list-style / transform / animation / transition / ...

Positioning 處在第一位，因?yàn)樗梢允挂粋€(gè)元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式。盒模型緊跟其后，因?yàn)樗麤Q定了一個(gè)組件的大小和位置。其他屬性只在組件內(nèi)部起作用或者不會(huì)對(duì)前面兩種情況的結(jié)果產(chǎn)生影響，所以他們排在后面。

7.合理使用使用引號(hào)

在某些樣式中，會(huì)出現(xiàn)一些含有空格的關(guān)鍵字或者中文關(guān)鍵字。

font-family 內(nèi)使用引號(hào)

當(dāng)字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，為了保證兼容性，都建議在字體兩端添加單引號(hào)或者雙引號(hào)：

body {

  font-family: 'Microsoft YaHei', '黑體-簡(jiǎn)', '\5b8b\4f53';

}

background-image 的 url 內(nèi)使用引號(hào)

如果路徑里面有空格，舊版 IE 是無(wú)法識(shí)別的，會(huì)導(dǎo)致路徑失效，建議不管是否存在空格，都添加上單引號(hào)或者雙引號(hào)：

div {

  background-image: url('...');

}

總而言之，一套嚴(yán)格的CSS樣式書(shū)寫(xiě)規(guī)范對(duì)于CSS樣式來(lái)說(shuō)是十分必要的，這不僅僅能夠保持代碼的整潔性，避免代碼中的錯(cuò)誤，同時(shí)也能幫我們更快速更清晰地弄清楚代碼的結(jié)構(gòu)，讓人耳目一新。規(guī)范整齊的代碼也有助于后期維護(hù)。在本站的HTML教程中還有更多關(guān)于CSS的知識(shí)介紹，感興趣的小伙伴不要錯(cuò)過(guò)哦！