我們在使用CSS時可能由于是不同的團隊，所以有各自的規范，又或者很多人在寫 CSS 的時候還是想到什么就寫什么，不存在太多的約束。但必須要說明的是CSS代碼規范還是有存在的必要的，尤其是在團隊配合，多人協作下，規范就顯得尤為重要。本文我們為大家總結了實踐當中得出的一套比較不錯的CSS樣式書寫規范，希望大家能夠在撰寫CSS代碼時規范自己的CSS樣式。

1.編碼設置

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

@charset "utf-8";

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

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

/* 字符編碼 */

@charset "utf-8";

html,

body {

  height: 100%;

}

@charset "utf-8";

2.命名空間規范

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

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

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

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

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

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

3.選擇器

當一個規則包含多個選擇器時，每個選擇器獨占一行。

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

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

.g-content ~ .g-footer {

}

命名短且語義化良好

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

4.規則聲明塊

當規則聲明塊中有多個樣式聲明時，每條樣式獨占一行。

在規則聲明塊的左大括號 { 前加一個空格。

在樣式屬性的冒號 : 后面加上一個空格，前面不加空格。

在每條樣式后面都以分號 ; 結尾。

規則聲明塊的右大括號 } 獨占一行。

每個規則聲明間用空行分隔。

所有最外層引號使用單引號 ' 。

當一個屬性有多個屬性值時，以逗號 , 分隔屬性值，每個逗號后添加一個空格，當單個屬性值過長時，每個屬性值獨占一行。

5.數值與單位

當屬性值或顏色參數為 0 - 1 之間的數時，省略小數點前的 0 。

color: rgba(255, 255, 255, 0.5)

color: rgba(255, 255, 255, .5);

當長度值為 0 時省略單位。

margin: 0px auto

margin: 0 auto

十六進制的顏色屬性值使用小寫和盡量簡寫。

color: #ffcc00

color: #fc0

6.樣式屬性順序

單個樣式規則下的屬性在書寫時，應按功能進行分組，并以 Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。

如果包含 content 屬性，應放在最前面；

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

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

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

Visual 視覺外觀，相關屬性包括：color / background / list-style / transform / animation / transition / ...

Positioning 處在第一位，因為他可以使一個元素脫離正常文本流，并且覆蓋盒模型相關的樣式。盒模型緊跟其后，因為他決定了一個組件的大小和位置。其他屬性只在組件內部起作用或者不會對前面兩種情況的結果產生影響，所以他們排在后面。

7.合理使用使用引號

在某些樣式中，會出現一些含有空格的關鍵字或者中文關鍵字。

font-family 內使用引號

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

body {

  font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';

}

background-image 的 url 內使用引號

如果路徑里面有空格，舊版 IE 是無法識別的，會導致路徑失效，建議不管是否存在空格，都添加上單引號或者雙引號：

div {

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

}

總而言之，一套嚴格的CSS樣式書寫規范對于CSS樣式來說是十分必要的，這不僅僅能夠保持代碼的整潔性，避免代碼中的錯誤，同時也能幫我們更快速更清晰地弄清楚代碼的結構，讓人耳目一新。規范整齊的代碼也有助于后期維護。在本站的HTML教程中還有更多關于CSS的知識介紹，感興趣的小伙伴不要錯過哦！