編碼規範

轉向前端寫了一段時間css以後看到這個，醍醐灌頂。

難怪總是覺得自己的css檔案總是亂到不行，往往看起來簡單的一些細節，決定了很多東西。

特此銘記學習。

編碼規範 by @mdo

編寫靈活、穩定、高品質的 html 和 css 代碼的規範。

永遠遵循同一套編碼規範 -- 可以是這裡列出的，也可以是你自己總結的。如果你發現本規範中有任何錯誤，敬請指正。通過 為本規範添加或貢獻内容。

不管有多少人共同參與同一項目，一定要確定每一行代碼都像是同一個人編寫的。

用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一緻展現的方法。

嵌套元素應當縮進一次（即兩個空格）。

對于屬性的定義，確定全部使用雙引号，絕不要使用單引号。

不要在自閉和（self-closing）元素的尾部添加斜線 -- 中明确說明這是可選的。

不要省略可選的結束标簽（closing

tag）（例如，<code>&lt;/li&gt;</code> 或<code>&lt;/body&gt;</code>）。

為每個 html 頁面的第一行添加标準模（standard mode）式的聲明，這樣能夠確定在每個浏覽器中擁有一緻的展現。

根據 html5 規範：

強烈建議為 html 根元素指定 lang 屬性，進而為文檔設定正确的語言。這将有助于語音合成工具确定其所應該采用的發音，有助于翻譯工具确定其翻譯時所應遵守的規則等等。

更多關于 <code>lang</code> 屬性的知識可以從  中了解。

這裡列出了。

ie 支援通過特定的 <code>&lt;meta&gt;</code> 标簽來确定繪制目前頁面所應該采用的 ie

版本。除非有強烈的特殊需求，否則最好是設定為 edge mode，進而通知 ie 采用其所支援的最新的模式。

可以獲得更多有用的資訊。

通過明确聲明字元編碼，能夠確定浏覽器快速并容易的判斷頁面内容的渲染方式。這樣做的好處是，可以避免在 html 中使用字元實體标記（character

entity），進而全部與文檔編碼一緻（一般采用 utf-8 編碼）。

根據 html5 規範，在引入 css 和 javascript

檔案時一般不需要指定 <code>type</code> 屬性，因為 <code>text/css</code> 和 <code>text/javascript</code> 分别是它們的預設值。

盡量遵循 html 标準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的标簽并保持最小的複雜度。

html 屬性應當按照以下給出的順序依次排列，確定代碼的易讀性。

<code>class</code>

<code>id</code>, <code>name</code>

<code>data-*</code>

<code>src</code>, <code>for</code>, <code>type</code>, <code>href</code>

<code>title</code>, <code>alt</code>

<code>aria-*</code>, <code>role</code>

class 用于辨別高度可複用元件，是以應該排在首位。id 用于辨別具體元件，應當謹慎使用（例如，頁面内的書簽），是以排在第二位。

布爾型屬性可以在聲明時不指派。xhtml 規範要求為其指派，但是 html5 規範不需要。

更多資訊請參考 ：

元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其指派的話，請參考 whatwg 規範：

如果屬性存在，其值必須是空字元串或 [...] 屬性的規範名稱，并且不要再收尾添加空白符。

簡單來說，就是不用指派。

編寫 html 代碼時，盡量避免多餘的父元素。很多時候，這需要疊代和重構來實作。請看下面的案例：

通過 javascript 生成的标簽讓内容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

為選擇器分組時，将單獨的選擇器單獨放在一行。

為了代碼的易讀性，在每個聲明塊的左花括号前添加一個空格。

聲明塊的右花括号應當單獨成行。

每條聲明語句的 <code>:</code> 後應該插入一個空格。

為了獲得更準确的錯誤報告，每條聲明都應該獨占一行。

所有聲明語句都應當以分号結尾。最後一條聲明語句後面的分号是可選的，但是，如果省略這個分号，你的代碼可能更易出錯。

對于以逗号分隔的屬性值，每個逗号後面都應該插入一個空格（例如，<code>box-shadow</code>）。

不要在 <code>rgb()</code>、<code>rgba()</code>、<code>hsl()</code>、<code>hsla()</code> 或 <code>rect()</code> 值的内部的逗号後面插入空格。這樣利于從多個屬性值（既加逗号也加空格）中區分多個顔色值（隻加逗号，不加空格）。

對于屬性值或顔色參數，省略小于 1 的小數前面的 0

（例如，<code>.5</code> 代替 <code>0.5</code>；<code>-.5px</code> 代替 <code>-0.5px</code>）。

十六進制值應該全部小寫，例如，<code>#fff</code>。在掃描文檔時，小寫字元易于分辨，因為他們的形式更易于區分。

盡量使用簡寫形式的十六進制值，例如，用 <code>#fff</code> 代替<code>#ffffff</code>。

為選擇器中的屬性添加雙引号，例如，<code>input[type="text"]</code>。，但是，為了代碼的一緻性，建議都加上雙引号。

避免為 0 值指定機關，例如，用 <code>margin: 0;</code> 代替 <code>margin: 0px;</code>。

對于這裡用到的術語有疑問嗎？請參考 wikipedia 上的 。

相關的屬性聲明應當歸為一組，并按照下面的順序排列：

positioning

box model

typographic

visual

由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆寫盒模型（box

model）相關的樣式，是以排在首位。盒模型排在第二位，因為它決定了元件的尺寸和位置。

其他屬性隻是影響元件的内部（inside）或者是不影響前兩組屬性，是以排在後面。

完整的屬性清單及其排列順序請參考 。

與 <code>&lt;link&gt;</code> 标簽相比，<code>@import</code> 指令要慢很多，不光增加了額外的請求次數，還會導緻不可預料的問題。替代辦法有以下幾種：

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

通過 sass 或 less 類似的 css 預處理器将多個 css 檔案編譯為一個檔案

通過 rails、jekyll 或其他系統中提供過 css 檔案合并功能

請參考 了解更多知識。

将媒體查詢放在盡可能相關規則的附近。不要将他們打包放在一個單一樣式檔案中或者放在文檔底部。如果你把他們分開了，将來隻會被大家遺忘。下面給出一個典型的執行個體。

當使用特定廠商的帶有字首的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對其，這樣便于多行編輯。

在 textmate 中，使用 text → edit each line in

selection(??a)。在 sublime text 2 中，使用 selection → add

previous line (??↑) 和 selection → add next

line (??↓)。

對于隻包含一條聲明的樣式，為了易讀性和便于快速編輯，建議将語句放在同一行。對于帶有多條聲明的樣式，還是應當将聲明分為多行。

這樣做的關鍵因素是為了錯誤檢測 -- 例如，css 校驗器指出在 183

行有文法錯誤。如果是單行聲明，你就不會忽略這個錯誤；如果是多行聲明的話，你就要仔細分析了。

在需要顯示地設定所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：

<code>padding</code>

<code>margin</code>

<code>font</code>

<code>background</code>

<code>border</code>

<code>border-radius</code>

大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，html 的 heading

元素隻需要設定上、下邊距（margin）的值，是以，在必要的時候，隻需覆寫這兩個值就可以。過度使用簡寫形式的屬性聲明會導緻代碼混亂，并且會對屬性值帶來不必要的覆寫進而引起意外的副作用。

mdn（mozilla developer network）上一片非常好的關于 的文章，對于不太熟悉簡寫屬性聲明及其行為的使用者很有用。

避免非必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味着應該使用嵌套。隻有在必須将樣式限制在父元素内（也就是後代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。

代碼是由人編寫并維護的。請確定你的代碼能夠自描述、注釋良好并且易于他人了解。好的代碼注釋能夠傳達上下文關系和代碼目的。不要簡單地重申元件或 class

名稱。

對于較長的注釋，務必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。

class 名稱中隻能出現小寫字元和破折号（dashe）（不是下劃線，也不是駝峰命名法）。破折号應當用于相關 class

的命名（類似于命名空間）（例如，<code>.btn</code> 和 <code>.btn-danger</code>）。

避免過度任意的簡寫。<code>.btn</code> 代表 button，但是 <code>.s</code> 不能表達任何意思。

class 名稱應當盡可能短，并且意義明确。

使用有意義的名稱。使用有組織的或目的明确的名稱，不要使用表現形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的字首。

使用 <code>.js-*</code> class 來辨別行為（與樣式相對），并且不要将這些 class 包含到 css

檔案中。

在為 sass 和 less 變量命名是也可以參考上面列出的各項規範。

對于通用元素使用 class ，這樣利于渲染性能的優化。

對于經常出現的元件，避免使用屬性選擇器（例如，<code>[class^="..."]</code>）。浏覽器的性能會受到這些因素的影響。

選擇器要盡可能短，并且盡量限制組成選擇器的元素個數，建議不要超過 3 。

隻有在必要的時候才将 class 限制在最近的父元素内（也就是後代選擇器）（例如，不使用帶字首的 class 時

-- 字首類似于命名空間）。

擴充閱讀：

以元件為機關組織代碼段。

制定一緻的注釋規範。

使用一緻的空白符将代碼分隔成塊，這樣利于掃描較大的文檔。

如果使用了多個 css 檔案，将其按照元件而非頁面的形式分拆，因為頁面會被重組，而元件隻會被移動。

将你的編輯器按照下面的配置進行設定，以避免常見的代碼不一緻和差異：

用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。

儲存檔案時，删除尾部的空白符。

設定檔案編碼為 utf-8。

在檔案結尾添加一個空白行。

參照文檔并将這些配置資訊添加到項目的 <code>.editorconfig</code> 檔案中。例如：。更多資訊請參考 。