【整理】18種推薦的CSS命名和書寫規範

選擇器的命名規範

1.模塊化命名

例如：

• 與佈局相關的樣式以「g」爲開頭。如「g-content」和「g-header」；
• 與掛鉤相關的樣式以「j」爲開頭。如「j-open」和「j-request」；
• 與元件相關的樣式以「m」爲開頭。如「m-dropMenu」和「m-slider」；
• 與狀態相關的樣式以「s」爲開頭。如「s-current」和「s-selected」；
• 與工具相關的樣式以「u」爲開頭。如「u-clearfix」和「u-ellipsis」。

「工具」是指與業務邏輯解耦的，可以重用的樣式；「元件」是指自定義的可重用且可移植的基本網頁元素；「掛鉤」是指供JavaScript操縱的樣式。

以上的說明只是舉例，你們能夠根據項目需求自定義開頭的字符，這樣作的目的是使CSS代碼整潔易維護。

2.選擇器皆爲小寫形式

推薦的寫法：

.g-first-header
{
    line-height: 16px;
}

不推薦的寫法：

.g-FirstHeader
{
    line-height: 16px;
}

3.每一個選擇器獨佔一列

除最後一個選擇器外，其它每一列選擇器均以逗號結尾。若用到兄弟元素選擇器，則相關符號的左右兩端均留出一個半角空格。

推薦的寫法：

.g-first-header,
.g-second-header-1 > .g-second-header-2
{
    border: 2px solid #C3C3C3;
}

不推薦的寫法：

.g-first-header, .g-second-header-1>.g-second-header-2
{
    border: 2px solid #C3C3C3;
}

4.避開HTML標記

構建選擇器時應儘可能採用語義明確的類別名稱，避開HTML標記，由於一旦HTML的結構產生更動，則與此對應的樣式也就無效了。儘可能將樣式與結構分離，這樣會使得階層式樣式表在往後更易被維護。

推薦的寫法：

.g-content .g-item
{
    flex-basis: 20%;
}

不推薦的寫法：

.g-content li
{
    flex-basis: 20%;
}

5.少用ID

ID的惟一性註定了它所對應的元素的樣式就是一次性的，沒法重用，一旦HTML結構發生變化，套用ID的選擇器就要隨之修改。另外一個重要的緣由是：ID的權重值是最高的，這可能會致使往後添加的樣式沒法複寫原先的樣式。

推薦的寫法：

.g-special-content
{
    height: 100px;
    width: 300px;
}

不推薦的寫法：

#special-content
{
    height: 100px;
    width: 300px;
}

屬性的書寫規範

1.按順序排列屬性

每條規則下的屬性在書寫時，應按類別進行分組，其排列順序以下：

1. 位置：bottom、float、display、left、position、right、top和z-index等；
2. 大小：height、margin、padding和width等；
3. 版式：color、font、letter-spacing、line-height和text-align等；
4. 背景：background等；
5. 其它：animation和transition等。

2.縮寫屬性

有些屬性是能夠合在一塊的，既精簡代碼，又便於閱讀。

推薦的寫法：

.test-selector-1
{
    padding: 3px 5px;
}

不推薦的寫法：

.test-selector-1
{
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}

3.去除小數開頭的0

推薦的寫法：

.test-selector-2
{
    font-size: .5em;
}

不推薦的寫法：

.test-selector-2
{
    font-size: 0.5em;
}

4.縮寫十六進位值

推薦的寫法：

.test-selector-3
{
    background-color: #0b0;
}

不推薦的寫法：

.test-selector-3
{
    background-color: #00bb00;
}

5.合理使用引號

對於「font-family」屬性來講，咱們一般會以引號夾住帶有空格的字體名稱，而對於不具有這些特徵的通常字體來講，引號存在與否並不影響頁面的顯示效果。爲了保證視覺上的統一，最大程度相容各類瀏覽器，建議你在全部字體名稱的兩端均加上引號。

推薦的寫法：

.test-selector-4
{
    font-family: "Microsoft YaHei", "微軟正黑體", "\5b8b\4f53";
}

不推薦的寫法：

.test-selector-4
{
    font-family: "Microsoft YaHei", 微軟正黑體, \5b8b\4f53;
}

個別屬性的值含有「url（）」字串，開發者須要往其中傳入一個資源路徑。請注意，在低版本的Internet Explorer中，路徑中的空格有可能沒法被辨識，致使資源沒法被找到。爲保險起見，不論路徑中是否含有空格，你傳入的路徑兩端最好都加上引號。

推薦的寫法：

.test-selector-5
{
    background-image: url(「../Images/BacPic.png」);
}

不推薦的寫法：

.test-selector-5
{
    background-image: url(../Images/BackPic.png);
}

6.避開！important

「！important」會給往後的維護帶來麻煩，使開發者難以查找樣式問題。若是在書寫時發現新樣式沒法複寫舊樣式。一般有兩個緣由：要麼新樣式寫在了舊樣式的前面，要麼新樣式對應的選擇器的權重比舊樣式的更低。針對後一種狀況，只要增長新樣式選擇器的權重值就能夠徹底避開這個問題，無需用到「！important」。

推薦的寫法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-6 .test-selector-7 .test-selector-8
{
    font-size: 14px;
}

不推薦的寫法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-8
{
    font-size: 14px !important;
}

7.規範註釋

在單列註釋中，星號與內容之間留一個半角空格。

推薦的寫法：

/* 這是第一段註釋文字。 */

// 這是第二段註釋文字。

不推薦的寫法：

/*這裏是一段註釋文字。*/

//這是第二段註釋文字。

在多列註釋中，多個星號要排成一條線。星號與內容之間一樣留一個半角空格。

推薦的寫法：

/**
 * 這裏是一段註釋文字。
 * 這是第二段註釋文字。
 */

不推薦的寫法：

/**
*這裏是一段註釋文字。
*這是第二段註釋文字。
*/

在文檔註釋中，除了要按照多列註釋的寫法之外，還要用標識符來講明文檔中的某一部分，標識符後的冒號右側與說明文字之間留一個半角空格。

推薦的寫法：

/**

* @name: 文件名；

* @description: 描述文字；

* @author: 張3、李四；

* @update: 2018年12月19日。

*/

不推薦的寫法：

/**

* @name:文件名；

* @description:描述文字；

* @author:張3、李四；

* @update:2018年12月19日。

*/

8.將標準屬性置於底部

有些屬性在部分瀏覽器中還沒有徹底標準化，每家瀏覽器開發商對這些屬性的實現效果或許並不統一，所以目前須要在開頭加入瀏覽器廠商的專有字符串。所以同一個屬性須要寫屢次，但有一條須要注意：將不帶前置標記的屬性置於最下方。

推薦的寫法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}

不推薦的寫法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
}

9.注意標點符號

每一個屬性獨佔一列。緊接樣式屬性的冒號，其後面要留一個半角空格。值以分號結尾。

推薦的寫法：

.test-selector-10
{
    opacity: .5;
}

不推薦的寫法：

.test-selector-10
{
    opacity:.5
}

10.樣式塊間留一空行

樣式選擇器及其樣式塊與周遭內容要保留一空行以免內容過於擁擠，妨礙尋找。

推薦的寫法：

.test-selector-11
{
    opacity: 0.5;
}

.test-selector-12
{
    font-size: 16px;
}

.test-selector-13
{
    overflow: hidden;
}

不推薦的寫法：

.test-selector-11
{
    opacity: 0.5;
}
.test-selector-12
{
    font-size: 16px;
}
.test-selector-13
{
    overflow: hidden;
}

11.將過長的內容折爲若干列

同一屬性的值不止一個或值過長時，以逗號分割這些值，每一個逗號後添加一個空格，過長的值能夠另起一列。

推薦的寫法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
}

不推薦的寫法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);
}

12.避開CSS Hack

所謂「CSS Hack」，就是在樣式表中加入少量特殊符號，讓可以辨識不一樣符號的瀏覽器在同一個元素上計算出來的樣式各不相同。出現CSS Hack的緣由就在於老式的瀏覽器（諸如飽受詬病的Internet Explorer 6）對同一套樣式表的計算結果與其它瀏覽器的並不相同，這就頗有可能會形成版式上的錯亂。所以在過去，咱們一般要針對個別怪異的瀏覽器撰寫有針對性的CSS。如width: 300px; _width: 200px;對其它瀏覽器來講，該選擇器的寬度值應爲300個像素，但IE 6可以辨識出底線，所以它計算出的寬度就是200個像素。

13.減小使用影響性能的屬性

樣式表中不要含有過多的濾鏡表達式和repeat關鍵字等，這些屬性會下降網頁的渲染性能。若要重複背景圖片，那麼原圖的寬高各不小於8px。