CSS編碼規範CSS編碼規範

本文轉載自https://github.com/fex-team/styleguide

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

CSS作為網頁樣式的描述語言，在百度一直有着廣泛的應用。本文檔的目标是使CSS代碼風格保持一緻，容易被了解和被維護。

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

解釋：

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

示例：

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

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

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

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

Formatting Model 相關屬性包括：<code>position</code> / <code>top</code> / <code>right</code> / <code>bottom</code> / <code>left</code> / <code>float</code> / <code>display</code> / <code>overflow</code> 等

Box Model 相關屬性包括：<code>border</code> / <code>margin</code> / <code>padding</code> / <code>width</code> / <code>height</code> 等

Typographic 相關屬性包括：<code>font</code> / <code>line-height</code> / <code>text-align</code> / <code>word-wrap</code> 等

Visual 相關屬性包括：<code>background</code> / <code>color</code> / <code>transition</code> / <code>list-style</code> 等

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

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

float 非 none

position 非 static

overflow 非 visible

如希望使用更小副作用的清除浮動方法，參見 A new micro clearfix hack 一文。

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

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

同層的多個元素，如多個由使用者輸入觸發的 Dialog，在該層級内使用相同的 <code>z-index</code> 或遞增 <code>z-index</code>。

建議每層包含100個 <code>z-index</code> 來容納足夠的元素，如果每層元素較多，可以調整這個數值。

可控環境分成兩種，一種是自身産品線環境；還有一種是可能會被其他産品線引用，但是不會被外部第三方的産品引用。

不建議取值為 <code>2147483647</code>。以便于自身産品線被其他産品線引用時，當遇到層級覆寫沖突的情況，留出向上調整的空間。

第三方環境對于開發者來說完全不可控。在第三方環境下的元素，為了保證元素不被其頁面其他樣式定義覆寫，需要采用此做法。

文本類型的内容可能在選擇器、屬性值等内容中。

帶有alpha的顔色資訊可以使用 <code>rgba()</code>。使用 <code>rgba()</code> 時每個逗号後必須保留一個空格。

2D 位置初始值為 <code>0% 0%</code>，但在隻有一個方向的值時，另一個方向的值會被解析為 center。為避免了解上的困擾，應同時給出兩個方向的值。background-position屬性值的定義

所謂英文 Family Name，為字型檔案的一個中繼資料，常見名稱如下：

字型

作業系統

Family Name

宋體 (中易宋體)

Windows

SimSun

黑體 (中易黑體)

SimHei

微軟雅黑

Microsoft YaHei

微軟正黑

Microsoft JhengHei

華文黑體

Mac/iOS

STHeiti

冬青黑體

Hiragino Sans GB

文泉驿正黑

Linux

WenQuanYi Zen Hei

文泉驿微米黑

WenQuanYi Micro Hei

更詳細說明可參考本文。

由于 Windows 的字型渲染機制，小于 12px 的文字顯示效果極差、難以辨認。

由于中文字型沒有 italic 風格的實作，所有浏覽器下都會 fallback 到 obilique 實作 (自動拟合為斜體)，小字号下 (特别是 Windows 下會在小字号下使用點陣字型的情況下) 顯示效果差，造成閱讀困難。

CSS 的字重分 100 – 900 共九檔，但目前受字型本身品質和浏覽器的限制，實際上支援 400 和 700 兩檔，分别等價于關鍵詞 normal 和 bold。

浏覽器本身使用一系列啟發式規則來進行比對，在 &lt;700 時一般比對字型的 Regular 字重，&gt;=700 時比對 Bold 字重。

但已有浏覽器開始支援 =600 時比對 Semibold 字重 (見此表)，故使用數值描述增加了靈活性，也更簡短。

将 line-height 設定為數值，浏覽器會基于目前元素設定的 font-size 進行再次計算。在不同字号的文本段落組合中，能達到較為舒适的行間間隔效果，避免在每個設定了 font-size 都需要設定 line-height。

當 line-height 用于控制垂直居中時，還是應該設定成與容器高度一緻。

見本文，在可能的情況下應選擇這樣四種變換：

<code>transform: translate(npx, npx);</code>

<code>transform: scale(n);</code>

<code>transform: rotate(ndeg);</code>

<code>opacity: 0..1;</code>

典型的，可以使用 translate 來代替 left 作為動畫屬性。

标準屬性放在最後，按冒号對齊友善閱讀，也便于在編輯器内進行多行編輯。

如果能通過合理的 HTML 結構或使用其他的 CSS 定義達到理想的樣式，則不應該使用 hack 手段解決問題。通常 hack 會導緻維護成本的增加。

盡量使用符合 CSS 文法的 selector hack，可以避免一些第三方庫無法識别 hack 文法的問題。