CSS編碼規範

CSS編碼規範

本文檔的目标是使CSS代碼風格保持一緻，容易被了解和被維護，如果自己沒有這種習慣，請好好選擇你的IDE，别再用“文本編輯器”。

本文檔雖針對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> 等

Misc 相關屬性包括：<code>opacity</code> / <code>text-decoration</code> / <code>white-space</code> / <code>word-wrap</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 作為動畫屬性。

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

在 Sublime Text 2 中， 使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

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

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

解釋：與 相比, @import 更慢，需要額外的頁面請求，并且可能引發其他的意想不到的問題。應該避免使用他們，而選擇其他的方案：

使用多個 <code>&lt;link&gt;</code> 元素

使用 CSS 預處理器例如 <code>Sass</code> 或 <code>Less</code> 将樣式編譯到一個檔案中