一：前端普適性規范

黃金定律：永遠遵循同一套編碼規范，不管有多少人參與同一個項目，一定要保證每一行編碼都像同一個人寫的。

項目名稱：項目命名全部采用小寫方式，以中劃線分割，例如：my-project-name。

文件命名：文件命名參照上一條規則，多個單詞組成時，采用中劃線連接方式，比如說: error-report。有復數結構時，要采用復數命名法，比如說： scripts, styles, images, data-models。文件名中只可由小寫英文字母a~z、排序數字0~9或間隔符-組成，禁止包含特殊符號，不允許命名帶有廣告等英文的單詞，如ad,adv,advertising，防止該模塊被瀏覽器當成垃圾廣告過濾掉。

二：HTML規范

語法：使用四個空格的縮進，這是保證代碼在各種環境下顯示一致的唯一方式。在屬性上，使用雙引號，不要使用單引號。不要在自動閉合標簽結尾處使用斜線， 不要忽略可選的關閉標簽。

HTML5 doctype：在每個 HTML 頁面開頭使用這個簡單地 doctype 來啟用標準模式，使其每個瀏覽器中盡可能一致的展現。雖然doctype不區分大小寫，但是按照慣例，doctype大寫。

字符編碼：通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記，從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

IE兼容模式： IE 支持通過特定的標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

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

三：CSS規范

語法：

1.使用四個空格的縮進，這是保證代碼在各種環境下顯示一致的唯一方式。

2. 使用組合選擇器時，保持每個獨立的選擇器占用一行。

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

4. 聲明塊的右括號應該另起一行。每條聲明 : 后應該插入一個空格。

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

6. 所有聲明應該以分號結尾。

7. 雖然最后一條聲明后的分號是可選的，但是如果沒有他，的代碼會更容易出錯。

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

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

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

代碼組織：以組件為單位組織代碼。制定一個一致的注釋層級結構。使用一致的空白來分割代碼塊，這樣做在查看大的文檔時更有優勢。當使用多個 CSS 文件時，通過組件而不是頁面來區分他們。頁面會被重新排列，而組件移動就可以了

四：JS規范

語法：使用四個空格的縮進，這是保證代碼在各種環境下顯示一致的唯一方式。

空行：方法之間加、單行或多行注釋前加、邏輯塊之間加空行增加可讀性

單行注釋：雙斜線后，必須跟注釋內容保留一個空格與下一行代碼縮進保持一致可位于一個代碼行的末尾，雙斜線距離分號四個空格。

多行注釋格式：最少三行，前邊留空一行。

括號對齊：標準示例 括號前后有空格，花括號起始不另換行，結尾新起一行

花括號必須要，即使內容只有一行涉及 if、 for、 while 、do...while的地方都必須使用花括號，即使內容只有一行。