前言
這是一份旨在增強(qiáng)團(tuán)隊的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道，當(dāng)一個團(tuán)隊開始指定并實(shí)行編碼規(guī)范的話，錯誤就會變得更加顯而易見。如果一段特定的代碼不符合規(guī)范的話，它有可能只是代碼風(fēng)格錯誤，而也有可能會是 bug。早期指定規(guī)范就使得代碼審核得以更好的開展，并且可以更精確的地定位到錯誤。只要開發(fā)者們能夠保證源代碼源文件都嚴(yán)格遵循規(guī)范，那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同。
要講的依次為：
一般規(guī)范
以下章節(jié)列舉了一些可應(yīng)用在 HTML, JavaScript 和 CSS/SCSS 上的通用規(guī)則。
文件/資源命名
在 web 項目中，所有的文件名應(yīng)該都遵循同一命名約定。以可讀性而言，減號（-）是用來分隔文件名的不二之選。同時它也是常見的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所當(dāng)然的，減號應(yīng)該也是用來分隔資源名稱的好選擇。
請確保文件命名總是以字母開頭而不是數(shù)字。而以特殊字符開頭命名的文件，一般都有特殊的含義與用處（比如 compass[1] 中的下劃線就是用來標(biāo)記跳過直接編譯的文件用的）。
資源的字母名稱必須全為小寫，這是因為在某些對大小寫字母敏感的操作系統(tǒng)中，當(dāng)文件通過工具壓縮混淆后，或者人為修改過后，大小寫不同而導(dǎo)致引用文件不同的錯誤，很難被發(fā)現(xiàn)。
還有一些情況下，需要對文件增加前后綴或特定的擴(kuò)展名（比如 .min.js, .min.css），抑或一串前綴（比如 3fa89b.main.min.css）。這種情況下，建議使用點(diǎn)分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。
不推薦 MyScript.js myCamelCaseName.css i_love_underscores.html 1001-scripts.js my-file-min.css 推薦 my-script.js my-camel-case-name.css i-love-underscores.html thousand-and-one-scripts.js my-file.min.css
協(xié)議
不要指定引入資源所帶的具體協(xié)議。
當(dāng)引入圖片或其他媒體文件，還有樣式和腳本時，URLs 所指向的具體路徑，不要指定協(xié)議部分（http:, https:），除非這兩者協(xié)議都不可用。
不指定協(xié)議使得 URL 從絕對的獲取路徑轉(zhuǎn)變?yōu)橄鄬Φ模谡埱筚Y源協(xié)議無法確定時非常好用，而且還能為文件大小節(jié)省幾個字節(jié)。
不推薦<script src="http://cdn.com/foundation.min.js"></script>.example { background: url(http://static.example.com/images/bg.jpg);}推薦<script src="//cdn.com/foundation.min.js"></script>.example { background: url(//static.example.com/images/bg.jpg);} 文本縮進(jìn)
一次縮進(jìn)兩個空格。
HTML 代碼 <ul><li>Fantastic</li><li>Great</li><li><a href="#">Test</a></li></ul>CSS 代碼 @media screen and (min-width: 1100px) {body {font-size: 100%;}} JavaScript 代碼 注釋
注釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關(guān)緊要的代碼時，由于記憶點(diǎn)不深刻，注釋就變得尤為重要了。
編寫自解釋代碼只是一個傳說，沒有任何代碼是可以完全自解釋的。而代碼注釋，則是永遠(yuǎn)也不嫌多。
當(dāng)你寫注釋時一定要注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當(dāng)然也可以加入所思考問題或是解決方案的鏈接地址。
一些注釋工具可以幫助你寫出更好的注釋。JSDoc 或 YUIDoc 就是用來寫 JavaScript 注釋用的。你甚至可以使用工具來為這些注釋生成文檔，這也是激勵開發(fā)者們寫注釋的一個好方法，因為一旦有了這樣方便的生成文檔的工具，他們通常會開始花更多時間在注釋細(xì)節(jié)上。
HTML規(guī)范
文檔類型
推薦使用 HTML5 的文檔類型申明：<!DOCTYPE html>.
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）。
HTML 中最好不要將無內(nèi)容元素的標(biāo)簽閉合，例如：使用 <br> 而非 <br />.
屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性：
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于標(biāo)識高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link </a><input class="form-control" type="text"><img src="..." <title>Test</title> <article>This is only a test. 推薦 <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
語義化
根據(jù)元素（有時被錯誤地稱作“標(biāo)簽”）其被創(chuàng)造出來時的初始意義來使用它。打個比方，用 heading 元素來定義頭部標(biāo)題，p 元素來定義文字段落，用 a 元素來定義鏈接錨點(diǎn)，等等。
HTML元素的排序規(guī)則，一般我們使用的HTML元素包括：div, p, ul, table, span, input, select。 基本上div, table, ul, p都屬于結(jié)構(gòu)性比較強(qiáng)的元素，而span, input則是比較弱的元素，因此不允許有span嵌套div, table等等的情況出現(xiàn)， span可以嵌套input, 可以嵌套span。程序員在寫頁面的時候可以先不考慮界面呈現(xiàn)，按照這樣的規(guī)則，把數(shù)據(jù)直接綁定到HTML元素的節(jié)點(diǎn)上。
有根據(jù)有目的地使用 HTML 元素，對于可訪問性、代碼重用、代碼效率來說意義重大。
HTML注釋
1.每一獨(dú)立部分都要表明注釋。例如：
<!--右邊 begin--> <!--右邊end--><!--左邊 begin--><!--左邊end--><!--頭部 begin--> <!--頭部end--><!--講師列表 begin--> <!--講師列表end-->
2.注釋要用描述性語言，能夠清楚的表達(dá)每一部分的意思
<!--頁面標(biāo)頭 begin--><div id="top_frame"></div><!--頁面內(nèi)容 begin--><div id="main_frame"><!--菜單區(qū)域 begin--><div id="menu_zone"><%=GetMenuHtml()%></div><!--菜單區(qū)域 end--><!--折疊區(qū)域 begin--><div id="switch"><span class="_switch"></span></div><!--折疊區(qū)域 end--><!--內(nèi)容區(qū)域 begin--><div id="right_frame"><div id="main_zone"><asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder></div></div><!--內(nèi)容區(qū)域 end--></div><!--頁面內(nèi)容 end-->
關(guān)注點(diǎn)分離
為了使文檔成為可維護(hù)的干凈整潔的代碼，我們要盡可能的將信息（HTML 結(jié)構(gòu)）、外觀（CSS）和行為（JavaScript）分離開來，并使三者之間沒有太多的交互和聯(lián)系。
即在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動作行為，移入腳本之中。 為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
清晰的分層意味著：
不推薦 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/teaser.css"> </head> <body> <h1 style="font-size: 3rem"></h1> <b>I'm a subtitle and I'm bold!</b> <center>Dare you center me!</center> <script> alert('Just dont...'); </script> <div class="red">I'm important!</div> </body> </html> 推薦 <!DOCTYPE html> <html> <head> <!-- Concatinate your style sheets into a single one --> <link rel="stylesheet" href="main.css"> </head> <body> <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet --> <h1 class="title"></h1> <!-- Don't use presentational elements and assign sensible classes --> <div class="sub-title">I'm a subtitle and I'm bold!</div> <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet --> <span class="comment">Dare you center me!</span> <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet what you want to do with it --> <div class="important">I'm important!</div> <!-- Put all your scripts into files and concatinate them into a single one --> <script async src="main.js"></script> </body> </html>HTML 內(nèi)容至上
不要讓非內(nèi)容信息污染了你的 HTML。現(xiàn)在貌似有一種傾向：通過 HTML 來解決設(shè)計問題，這是顯然是不對的。HTML 就應(yīng)該只關(guān)注內(nèi)容。
不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計問題 不要將 img 元素當(dāng)做專門用來做視覺設(shè)計的元素 以下例子展示了誤將 HTML 用來解決設(shè)計問題的這兩種情況：
不推薦 <!-- We should not introduce an additional element just to solve a design problem --> <span class="text-box"> <span class="square"></span> See the square next to me? </span> .text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red; } 推薦 <!-- That's clean markup! --> <span class="text-box"> See the square next to me? </span> /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。
不推薦 <!-- Content images should never be used for design elements! --> <span class="text-box"> <img src="square.svg" See the square next to me? </span> 推薦 <!-- That's clean markup! --> <span class="text-box"> See the square next to me? </span> /* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; } HTML注意事項
Type 屬性
省略樣式表與腳本上的 type 屬性。鑒于 HTML5 中以上兩者默認(rèn)的 type 值就是 text/css 和 text/javascript，所以 type 屬性一般是可以忽略掉的。甚至在老舊版本的瀏覽器中這么做也是安全可靠的。
不推薦 <link rel="stylesheet" href="main.css" type="text/css"> <script src="main.js" type="text/javascript"></script> 推薦 <link rel="stylesheet" href="main.css"> <script src="main.js"></script>
HTML 引號
使用雙引號(“”) 而不是單引號(”) 。
不推薦 <div class='news-article'></div> 推薦 <div class="news-article"></div>
屬性值
屬性一率小寫，寬度、高度等要帶上“px”
<img height="60px" width="760px" src="images/logo.gif"/>
給所有的屬性賦值
不推薦 <input „„ checked /> 推薦<input „„ checked= "checked"/>
網(wǎng)頁中圖片優(yōu)化: 一定要加alt屬性，alt屬性指定了當(dāng)圖片不能顯示的時候就顯示供替換文本。 內(nèi)容最好與關(guān)鍵詞相關(guān)。
<img src="images/gxseo_logo.gif" <html lang="zh-CN"><!-- ... --></html>
IE 兼容模式
IE 支持通過特定的 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head><meta charset="UTF-8"></head>
前端編碼規(guī)范（3）JavaScript 開發(fā)規(guī)范
JavaScript規(guī)范
變量聲明
總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對變量難以控制。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進(jìn)入本地定義域）。所以，請總是使用 var 來聲明變量。
采用嚴(yán)格模式帶來的好處是，當(dāng)你手誤輸入錯誤的變量名時，它可以通過報錯信息來幫助你定位錯誤出處。
變量名
變量名推薦使用駝峰法來命名(camelCase)
全局變量為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )
函數(shù): 構(gòu)造函數(shù)始終以大寫字母開頭，非構(gòu)造函數(shù)以一個小寫字母開頭
變量名不要以 $ 作為開始標(biāo)記，避免與很多 JavaScript 庫沖突
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 規(guī)范
新聞熱點(diǎn)
疑難解答
圖片精選
