一、一般規范
1、命名規范
（1）以英文命名，避免出現拼音命名。
（2）文件命名全小寫，如需要分割以-連接。如：my-filter.js
（3）css 選擇器命名分割以-連接。如：.main-box-header
2、代碼縮進
（1）以TAP為一次縮進。
3、代碼注釋
（1）關鍵步驟必須寫注釋。
（2）不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當然也可以加入所思考問題或是解決方案的鏈接地址。
4、代碼檢查 使用JSLint或JSHint對javascript 代碼進行檢查。
二、HTML規范
1、文檔類型：使用HTML5文檔類型聲明。<!DOCTYPE html>
2、結構(HTML)、表現(CSS)、行為(JS)代碼分離.
HTML文件中只包含標簽，將表現放入樣式表中，將所有動作行為放入腳本文件中。在HTML的<head>中引入樣式文件，在</body>之前引入腳本文件。
3、<meat>聲明
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 讓網頁寬度適應屏幕寬度，多用於移動端。 <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit|ie-comp|ie-stand"> 讓360瀏覽器默認進入極速模式
4、<img> 標簽必須添加alt屬性。
在圖像無法顯示時的替代文本。在網速慢、圖片src屬性錯誤、瀏覽器禁用圖片或是屏幕閱讀器中alt屬性很重要，且利於SEO。
5、ID和錨點
頁面中重要的部分，如：頁頭、導航、主體、頁腳等加上ID。
單選、復選中為<input >加ID並在<lable>標簽中將for指向此ID。
例如：
<input type="checkbox" id="allowTrace" value="manual"> <label for="allowTrace"> 允許trace </label>
三、CSS規范
1、Css選擇器層級
錯誤示范：
.content_box form ul li {height:30px;margin:10px;}
錯誤原因：樣式指向不精准，使得受影響的標簽范圍太大，當多個頁面同時引用同一樣式表時，容易出現不可預見的問題。
#final #content .con_border .system_time .default_checkbox {}
錯誤原因：選擇器太多，權重太高，不利於后期維護。
.access_control > ul > li > ul > li > input{ margin-right:10px; }
錯誤原因：選擇器太多，影響運行效率，不利於樣式復用。盡量避免使用后代選擇器。
建議：層級盡量不超過三級，防止出現權重太高，不利於后期的覆蓋與維護。
2、!important
盡量避免使用!important，因為這是css里面的終極大招，用多了傷元氣。
3、合理的避免使用ID選擇器。
一般情況下ID不應被應用於樣式表中。因為ID樣式不能被復用且每個頁面中只能使用一次ID。還有一個原因是ID選擇器權重很高。
4、盡量避免使用元素選擇器
錯誤示范：
form ul li em{
}
推薦寫法：
.content .title{
}
5、css 書寫順序
(1)位置屬性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)
(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其他(animation, transition等)
6、縮寫屬性
例如：margin
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
簡寫：
margin:1px 2px 3px 4px;
例如：背景
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
縮寫：
background:#f00 url(background.gif) no-repeat fixed 0 0;
7、顏色值使用小寫的十六進制數字
不推薦：
color:#FF22AA;
推薦：
color:#f2a;
四、JAVASCRIPT規范
1、變量命名：駝峰命名法
例如：userName,passWorld;
2、==與===
總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強制類型轉換所造成的困擾。
如果你使用 === 操作符，那比較的雙方必須是同一類型為前提的條件下才會有效。 在只使用 == 的情況下，JavaScript 所帶來的強制類型轉換使得判斷結果跟蹤變得復雜。
3、變量聲明
使用 var 來聲明變量。原則上不建議使用全局變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對變量難以控制。如果沒有聲明，變量處於什么定義域就變得不清（可以是在 Document 或Window 中，也可以很容易地進入本地定義域）。所以，請總是使用 var 來聲明變量。
4、全局污染
除了使用var聲明變量外，還可以使用匿名函數包裹代碼防止全局命名空間被污染。
(function(){ // Code goes here }()); (function(log, w, undefined){
var x = 10, y = 100;
log((w.x === undefined) + ' ' + (w.y === undefined)); }(window.console.log, window));
5、eval 函數（魔鬼）
eval() 不但混淆語境還很危險，總會有比這更好、更清晰、更安全的另一種方案來寫你的代碼，因此盡量不要使用 evil 函數。
6、字符串拼接
按一定長度截斷字符串，並使用 + 運算符進行連接。分隔字符串盡量按語義進行，如不要在一個完整的名詞中間斷開。特別的，對於 HTML 片段的拼接，通過縮進，保持和 HTML 相同的結構。
var html = '' + '<article>' + '<h1>Title here</h1>' + '<p>This is a paragraph</p>' + '<footer>Complete</footer>' + '</article>'; var html = [ '<article>', '<h1>Title here</h1>', '<p>This is a paragraph</p>', '<footer>Complete</footer>', '</article>' ]; html = html.join('');
7、對有序集合進行遍歷時，緩存length
雖然現代瀏覽器都對數組長度進行了緩存，但對於一些宿主對象和老舊瀏覽器的數組對象，在每次 length 訪問時會動態計算元素個數，此時緩存 length 能有效提高程序性能。
for (var i = 0, len = elements.length; i < len; i++) { var element = elements[i]; // ...... }
注：本文引用《前端代碼基礎編寫規范》v1.1
參考百度前端JavaScript編碼規范https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md