此文嚴格按照W3C規範和部分實際專案可讀性，瀏覽器載入，效能等眾多屬性權衡，做出平時前端編碼規範

文檔。供廣大web工作者參考並實施，對維護和專案擴充套件升級都能省時省力。

CSS編碼規範

1 前言

2 程式碼風格

　　2.1 檔案

　　2.2 縮排

　　2.3 空格

　　2.4 行長度

　　2.5 選擇器

　　2.6 屬性

3 通用

　　3.1 選擇器

　　3.2 屬性縮寫

　　3.3 屬性書寫順序

　　3.4 清除浮動

　　3.5 !important

　　3.6 z-index

4 值與單位

　　4.1 文字

　　4.2 數值

　　4.3 url()

　　4.4 長度

　　4.5 顏色

　　4.6 2D 位置

5 文字編排

　　5.1 字型族

　　5.2 字號

　　5.3 字型風格

　　5.4 字重

　　5.5 行高

6 變換與動畫

7 響應式

8 相容性

　　8.1 屬性字首

　　8.2 Hack

　　8.3 Expression

1 前言

CSS 作為網頁樣式的描述語言，在百度一直有著廣泛的應用。本文件的目標是使 CSS 程式碼風格保持一致，容易被理解和被維護。

雖然本文件是針對 CSS 設計的，但是在使用各種 CSS 的預編譯器(如 less、sass、stylus 等)時，適用的部分也應儘量遵循本文件的約定。

2 程式碼風格

2.1 檔案

[建議] CSS 檔案使用無 BOM

 的 UTF-8 編碼。

解釋：

UTF-8 編碼具有更廣泛的適應性。BOM 在使用程式或工具處理檔案時可能造成不必要的干擾。

2.2 縮排

[強制] 使用 4 個空格做為一個縮排層級，不允許使用 2 個空格 或 tab 字元。

示例：

.selector {
    margin: 0;
    padding: 0;
}

2.3 空格

[強制] 選擇器 與 { 之間必須包含空格。

示例：

.selector {
}

[強制] 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

示例：

margin: 0;

[強制] 列表型屬性值 書寫在單行時，, 後必須跟一個空格。

示例：

font-family: Arial, sans-serif;

2.4 行長度

[強制] 每行不得超過 120 個字元，除非單行不可分割。

解釋：

常見不可分割的場景為URL超長。

[建議] 對於超長的樣式，在樣式值的 空格 處或 , 後換行，建議按邏輯分組。

示例：

/* 不同屬性值按邏輯分組 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重複多次的屬性，每次重複一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 類似函式的屬性值可以根據函式呼叫的縮排進行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

2.5 選擇器

[強制] 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

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

示例：

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

[強制] 屬性選擇器中的值必須用雙引號包圍。

解釋：

不允許使用單引號，不允許不使用引號。

示例：

/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female;
}

2.6 屬性

[強制] 屬性定義必須另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

[強制] 屬性定義後必須以分號結尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

3 通用

3.1 選擇器

[強制] 如無必要，不得為 id、class 選擇器新增型別選擇器進行限定。

解釋：

在效能和維護性上，都有一定的影響。

示例：

/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

[建議] 選擇器的巢狀層級應不大於 3 級，位置靠後的限定條件應儘可能精確。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

3.2 屬性縮寫

[建議] 在可以使用縮寫的情況下，儘量使用屬性縮寫。

示例：

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

[建議] 使用 border / margin / padding 等縮寫時，應注意隱含值對實際數值的影響，確實需要設定多個方向的值時才使用縮寫。

解釋：

border / margin / padding 等縮寫會同時設定多個屬性的值，容易覆蓋不需要覆蓋的設定。如某些方向需要繼承其他宣告的值，則應該分開設定。

示例：

/* centering <article class="page"> horizontally and highlight featured ones */
article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}

.featured {
    border: 1px solid #69c; /* introducing redundancy */
}

3.3 屬性書寫順序

[建議] 同一 rule set 下的屬性在書寫時，應按功能進行分組，並以 Formatting Model（佈局方式、位置） > Box Model（尺寸） > Typographic（文字相關） > Visual（視覺效果） 的順序書寫，以提高程式碼的可讀性。

解釋：

• Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
• Box Model 相關屬性包括：border / margin / padding / width / height 等
• Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
• Visual 相關屬性包括：background / color / transition / list-style 等

另外，如果包含 content 屬性，應放在最前面。

示例：

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

3.4 清除浮動

[建議] 當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設定 clear 或觸發 BFC 的方式進行 clearfix。儘量不使用增加空標籤的方式。

解釋：

觸發 BFC 的方式很多，常見的有：

• float 非 none
• position 非 static
• overflow 非 visible

另需注意，對已經觸發 BFC 的元素不需要再進行 clearfix。

3.5 !important

[建議] 儘量不使用 !important 宣告。

[建議] 當需要強制指定樣式且不允許任何場景覆蓋時，通過標籤內聯和 !important 定義樣式。

解釋：

必須注意的是，僅在設計上 確實不允許任何其它場景覆蓋樣式 時，才使用內聯的 !important 樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index 章節是其中一個特殊場景的典型樣例。

3.6 z-index

[建議] 將 z-index 進行分層，對文件流外絕對定位元素的視覺層級關係進行管理。

解釋：

同層的多個元素，如多個由使用者輸入觸發的 Dialog，在該層級內使用相