關注「教授學苑」，期待帶給你快樂的開發知識！

在這個web亂世中，還有一種規範可以去遵守！

黃金法則

不管有多少參與者，代碼都應該像同一個人所寫。

HTML規範

語法

• 使用兩個空格的 soft tabs — 這是保證代碼在各種環境下顯示一致的唯一方式

• 嵌套的節點應該縮進（兩個空格）

• 在屬性上，使用雙引號，不要使用單引號

• 不好在自動閉合標籤結尾處使用斜線

• 不要忽略可選的關閉標籤

HTML5 doctype

在每個 HTML 頁面開頭使用這個簡單地 doctype 來啟用標準模式，使其每個瀏覽器中儘可能一致的展現。

Language 屬性

鼓勵網站作者在 html 元素上指定 lang 屬性，來指出頁面的語言。這樣做有助於語言合成工具來確定發音方式，以及幫助翻譯工具決定使用的規則，等等

字元編碼

通過聲明一個明確的字元編碼，讓瀏覽器輕鬆、快速的確定適合網頁內容的渲染方式。這樣做之後，需要避免在 HTML 中出現字元實體，直接提供字元與文檔一致的編碼（通常是 UTF-8）

IE 兼容模式

Internet Explorer 支持使用兼容性<meta>

標籤來指定使用什麼版本的 IE 來渲染頁面。如果不是特殊需要，通常通過 edge mode 來通知 IE 使用最新的兼容模式。

引入 CSS 和 JavaScript

根據 HTML5 規範, 通常在引入 CSS 和 JavaScript 時不需要指明 type，因為 text/css和 text/javascript分別是他們的默認值。

實用高於完美

盡量遵循 HTML 標準和語義，但是不應該以浪費實用性作為代價。任何時候都要用盡量小的複雜度和盡量少的標籤來解決問題。

屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。

• class

• id, name

• data-*
  

• src, for, type, href, value
  

• title, alt
  

• role, aria-*

Classes 是為高可復用組件設計的，所以他們處在第一位。Ids 更加具體而且應該盡量少使用（例如, 頁內書籤），所以他們處在第二位。

Boolean 屬性

不要為 Boolean 屬性添加取值

減少標籤數量

在編寫 HTML 代碼時，需要盡量避免多餘的父節點。很多時候，需要通過迭代和重構來使 HTML 變得更少

JavaScript 生成標籤

在 JavaScript 文件中生成標籤讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。

CSS規範

語法

• 使用兩個空格的 soft tabs — 這是保證代碼在各種環境下顯示一致的唯一方式。

• 使用組合選擇器時，保持每個獨立的選擇器佔用一行。

• 為了代碼的易讀性，在每個聲明的左括弧前增加一個空格。

• 聲明塊的右括弧應該另起一行。

• 每條聲明：後應該插入一個空格。

• 每條聲明應該只佔用一行來保證錯誤報告更加準確。

• 所有聲明應該以分號結尾。雖然最後一條聲明後的分號是可選的，但是如果沒有他，你的代碼會更容易出錯。

• 逗號分隔的取值，都應該在逗號之後增加一個空格。

• 不要在顏色值 rgb(), rgba(), hsl(), hsla() ,和 rect() 中增加空格。

• 不要在屬性取值或者顏色參數前面添加不必要的 0。

• 所有的十六進位值都應該使用小寫字母。

• 儘可能使用短的十六進位數值

• 為選擇器中得屬性取值添加引號。

• 不要為 0 指明單位。

聲明順序

相關的屬性聲明應該以下面的順序分組處理：

1. Positioning

2. Box model 盒模型

3. Typographic 排版

4. Visual 外觀

Positioning 處在第一位，因為他可以使一個元素脫離正常文本流，並且覆蓋盒模型相關的樣式。盒模型緊跟其後，因為他決定了一個組件的大小和位置。

其他屬性只在組件 內部 起作用或者不會對前面兩種情況的結果產生影響，所以他們排在後面。

媒體查詢位置

盡量將媒體查詢的位置靠近他們相關的規則。不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部。這樣做只會讓大家以後更容易忘記他們。

不要使用@import

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

• 使用多個link元素

• 使用 CSS 預處理器例如 Sass 或 Less 將樣式編譯到一個文件中

• 使用 Rails, Jekyll 或其他環境提供的功能，來合併 CSS 文件。

前綴屬性

當使用廠商前綴屬性時，通過縮進使取值垂直對齊以便多行編輯。

單條聲明的聲明塊

在一個聲明塊中只包含一條聲明的情況下，為了易讀性和快速編輯可以考慮移除其中的換行。所有包含多條聲明的聲明塊應該分為多行。

屬性簡寫

堅持限制屬性取值簡寫的使用，屬性簡寫需要你必須顯式設置所有取值。常見的屬性簡寫濫用包括:

• padding
  

• margin
  

• font
  

• background
  

• border
  

• border-radius

大多數情況下，我們並不需要設置屬性簡寫中包含的所有值。例如，HTML 頭部只設置上下的 margin，所以如果需要，只設置這兩個值。過度使用屬性簡寫往往會導致更混亂的代碼，其中包含不必要的重寫和意想不到的副作用。

LESS 和 SASS 中的嵌套

避免不必要的嵌套。可以進行嵌套，不意味著你應該這樣做。只有在需要給父元素增加樣式並且同時存在多個子元素時才需要考慮嵌套。

LESS 和 SASS 中的運算符

為了提高代碼可讀性，在數學運算外增加括弧，並且在取值，變數和運算符之間增加空格。

代碼注釋

代碼是由人來編寫和維護的。保證你的代碼是描述性的，包含好的注釋，並且容易被他人理解。好的代碼注釋傳達上下文和目標。不要簡單地重申組件或者 class 名稱。

Class 命名

• 保持 Class 命名為全小寫，可以使用短劃線（不要使用下劃線和 camelCase 命名）。短劃線應該作為相關類的自然間斷。

• 避免過度使用簡寫。

• Class 的命名應該盡量短，也要盡量明確

• 使用有意義的名稱；使用結構化或者作用目標相關，而不是抽象的名稱。

• 命名時使用最近的父節點或者父 class 作為前綴

• 這些規則在創建 Sass 和 Less 變數名時同樣有用。

選擇器

• 使用 classes 而不是通用元素標籤來優化渲染性能
  

• 避免在經常出現的組件中使用一些屬性選擇器

• 減少選擇器的長度，每個組合選擇器選擇器的條目應該盡量控制在 3 個以內。

• 只在必要的情況下使用後代選擇器 (例如，沒有使用帶前綴 classes 的情況).

代碼組織

• 以組件為單位組織代碼。

• 制定一個一致的注釋層級結構。

• 使用一致的空白來分割代碼塊，這樣做在查看大的文檔時更有優勢。

• 當使用多個 CSS 文件時，通過組件而不是頁面來區分他們。頁面會被重新排列組合，而組件是可以移動的。

關注「教授學苑」，期待帶給你快樂的開發知識！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！