編碼規範 —— 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規範

時間 2019-11-07

標籤編碼規範編寫靈活穩定高質量 html css 代碼欄目字符編碼简体版

原文原文鏈接

黃金定律

永遠遵循同一套編碼規範 - 能夠是這裏列出的，也能夠是你本身總結的。若是發現規範中有任何錯誤，敬請指正。javascript

HTML

語法

用兩個空格代替製表符 (tab)，這是惟一能保證在全部環境下得到一致展示的方法。css
嵌套元素應當縮進一次（即兩個空格）。html
對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。java
不要在自閉合 (self-closing)元素的尾部添加斜線 —— HTML5規範中明確說明這是可選的。git
不要省略可選的結束標籤 (closing tag)，如 </li> 或 </body>。github

HTML5 doctype

爲每一個HTML5頁面的第一行添加標準模式（standard mode）的聲明，這樣可以確保在每一個瀏覽器中擁有一致的展示。瀏覽器

語言屬性

強烈建議爲 HTML 根元素指定 lang 屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應該遵照的規則等等。sass

例如：<html lang="zh-CN"></html>less

IE兼容模式

IE 支持經過特定的 meta 標籤來肯定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊要求，不然最好是設置爲 edge mode，從而通知IE採用其所支持的最新模式。編輯器

字符編碼

經過明確聲明字符編碼，可以確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣作的好處是，能夠避免在 HTML 中使用字符實體標記（character entity）,從而所有與文檔編碼一致（通常採用 UTF-8 編碼）。

引入 CSS 和 JavaScript 文件

引入 CSS 和 JavaScript 文件時通常不須要指定 type 屬性，由於 text/css 和 text/javascript 分別是它們的默認值。

實用爲王

儘可能遵循 HTML 標準和語義，可是不要以犧牲實用性爲代價，任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度。

屬性順序

HTML屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

布爾（boolean）型屬性

簡單來講就是不用賦值。

減小標籤的數量

編寫 HTML 代碼時，儘可能避免多餘的父元素，不少時候，這須要迭代和重構來實現。

JavaScript 生成的標籤

經過 JavaScript 生成的標籤讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免。

CSS

用兩個空格代替製表符（tab）這是惟一能保證在全部環境下得到一致展示的方法。
爲選擇器分組時，將單獨的選擇器單獨放在一行。
爲了代碼的易讀性，在每一個聲明塊的左花括號前添加一個空格。
聲明塊的右花括號應當單獨成行。
爲了得到更準確的錯誤報告，每條聲明都應該獨佔一行。
全部的聲明語句都應當以分號結尾，最後一條聲明語句後面的分號是可選的，可是，若是省略這個分號，你的代碼可能更易出錯。
對於以逗號分隔的屬性，每一個逗號後面都應該插入一個空格（如 box-shadow）。
不要在 rgb(), rgba(), hsl(), hsla(), 或 rect() 值的內部的逗號後面插入空格。
對於屬性值或顏色參數，省略小於 1 的小數前面的 0（如 .5 代替 0.5；-.5 代替 -0.5px）。
十六進制值應該所有小寫，如 #fff。在掃描文檔時，小寫字符易於分辨，由於他們的形式更易於區分；
儘可能使用簡寫形式的十六進制值，例如用 #fff 代替 #ffffff。
爲選擇其中的屬性添加雙引號，如 input[type="text"]。
避免爲0指定單位。

聲明順序

position
box model
typographic (一些輪廓樣式)
visual (內部樣式)

因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式，所以排在首位。盒模型排在第二位，由於它決定了組件的尺寸和位置。

其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面。

帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，經過縮進的方式，讓每一個屬性的值在垂直方向對齊，這樣便於多行編輯。

單行規則聲明

對於只包含一條聲明的樣式，爲了易讀和便於快速編輯，建議將語句放在同一行。對於帶有多條聲明的樣式，仍是應當將聲明分爲多行。

這樣作的關鍵因素是爲了錯誤檢測。例如，css 校驗器指出在 183 行有語法錯誤。若是是單行聲明，你就不會忽略這個錯誤；若是是單行多條聲明的話，你就要仔細分析避免漏掉錯誤了。

簡寫形式的屬性聲明

在須要顯示地設置全部值得狀況下，應當儘可能限制使用簡寫形式的屬性聲明，常見的濫用簡寫屬性聲明的狀況以下：

padding; margin; font; background; border; border-radius;

大部分狀況下，咱們不須要爲簡寫的屬性聲明指定全部值。過分使用簡寫形式的屬性聲明會致使代碼混亂，而且會對屬性值帶來沒必要要的覆蓋而引發意外的反作用。MDN 上一篇很是好的關於 shortand properties 的文章，對於不太熟悉簡寫屬性聲明及其行爲的用戶頗有用。

less 和 sass 中的嵌套

避免非必要的嵌套，這是由於雖然你可使用嵌套，可是並不意味着應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選擇器），而且存在多個須要嵌套元素時才使用嵌套。

註釋

代碼是由人編寫並維護的。請確保你的代碼可以自描述、註釋良好而且易於他人理解。好的代碼註釋可以傳達上下文關係和代碼目的。不要簡單地重申組件或 class 名稱；對於較長的註釋，務必書寫完整的句子；對於通常性註釋，能夠書寫簡介的短語。

class 命名

class 名稱中只能出現小寫字符和破折號（不是下劃線也不是駝峯命名法）。破折號應當用於相關 class 命名（如 .btn 和 .btn-danger ），避免過分任意的簡寫。.btn 表明 button ，可是 .s 不能表達任何意思。

class 名稱應當儘量短，而且意義明確。
使用有意義的名稱。使用有組織的或者目的明確的名稱，不要使用表現形式的名稱。
基於最近的父 class 或基本 (base) class做爲新 class 的前綴。
使用 .js class 來標識行爲（與樣式相對），而且不要將這些class包含到css文件中。

選擇器

對於通用元素使用 class，這樣利於渲染性能的優化。
對於常常出現的組件，避免使用屬性選擇器，瀏覽器的性能會受到這些因素的影響。
選擇器要儘量短，而且儘可能限制組成選擇器的元素個數，建議不要超過3.
只有在必要的時候纔將 class 限制在最近的父元素內（也就是後代選擇器）

代碼組織

已組件爲單位組織代碼
指定一致的註釋規範
使用一致的空白符將代碼分隔成塊，這樣利於掃描較大的文檔
若是使用了多個 css 文件，將其按照組件而非頁面的形式拆分，由於頁面會被重組，而組件只會被移動。

編輯器配置

將你的編輯器按照下面的配置進行設置，以避免常見的代碼不一致和差別：

用兩個空格代替製表符
保存文件時刪除尾部的空白符
設置文件編碼爲 UTF-8
在文件結尾添加一個空白行。

原文連接

工做也有些時日了，本身也整理了一份還不完善的規範文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。