一：前端普適性規(guī)范

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

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

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

二：HTML規(guī)范

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

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

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

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

實用高于完美：盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不應(yīng)該以浪費(fèi)實用性作為代價。任何時候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來解決問題。

三：CSS規(guī)范

語法：

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

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

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

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

5. 每條聲明應(yīng)該只占用一行來保證錯誤報告更加準(zhǔn)確。

6. 所有聲明應(yīng)該以分號結(jié)尾。

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

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

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

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

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

四：JS規(guī)范

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

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

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

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

括號對齊：標(biāo)準(zhǔn)示例 括號前后有空格，花括號起始不另換行，結(jié)尾新起一行

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