HTML規範：
編碼格式
<meta charset="utf-8" />
註釋規範
模塊後面加上註釋
<div class="module">
<div class=“module-function">
</div>
</div><!-- module -->
<div class="module">
…
</div><!-- module -->
使用HTML5的文檔類型聲明
<!DOCTYPE html>
注意標籤的閉合和空格,使用雙引號
<a href="…"></a>
<input type="text" />
<img src="…" alt="…" />
標籤語義化，減少無語義的div和span，使用h1-h6作標題，使用ul，ol，dl作列表，建議使用html5標籤
<section class="news">
<header class="news-header">
</header>
<footer class="news-footer">
</footer>
</section>
CSS文件放在head區，且在JS文件前
不要使用內聯CSS和內嵌CSS（在HTML里加Style），特殊組件除外
JS框架文件可以放在頭部，其他JS文件放在頁面底部</body>標籤的上方
標籤規範
一個標籤佔用一行
標籤縮進爲 4 個空格
不使用已廢棄的標籤，如 <center>等
標籤使用data-xxx來添加自定義數據
HTML的特殊符號使用符號實體
http://www.w3school.com.cn/tags/html_ref_entities.html
移動端meta聲明
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
省略樣式表與腳本上的 type 屬性
<link rel="stylesheet" href="style.css">
<script src="common.js"></script>
img標籤不要寫上寬度和高度
CSS規範：
編碼格式
@charset "utf-8";
註釋規範
頭部有模塊名、作者、修改日期、描述，註釋使用英文
/**
* sale4pos
*
* Author: wu.h1
* Date: 2014/12/16
* Description: Retail Sale4pos
*/
模塊註釋
/* header bar
---------------------------------- */
類註釋
/* form */
引入文件規範
使用link引入，不要使用@import
<link rel="stylesheet" type="text/css" href="style.css" />
模塊命名一般使用class，不用id
.module { width: 200px; }
使用中劃線” - ”作爲類名分割符
.module-function { }
命名語義化，不過度簡寫，不使用拼音
.btn { padding: 5px 10px; }
.btn-sm { padding: 3px 7px; }
書寫規範
規則寫成一行，屬性以空格分割，冒號後有空格，屬性值後有分號
.item { width: 10px; height: 10px; }
引號使用雙引號，url值不使用引號
.row:after { content: " "; }
.logo { background: url(a.jpg); }
省略0後面的單位
.module-header { margin: 0; }
屬性不要使用中文
.btn { font-family: "Microsoft YaHei"; }
.btn { font-family: "\5fae\8f6f\96c5\9ed1"; }
CSS屬性建議書寫順序
顯示屬性
display, position, float, clear, overflow
自身屬性
width, height, margin, padding
排列
vertical-align, white-space, text-decoration, text-align
文字
color, font, content
邊框背景
border, background
屬性規範
一般不要使用 !important
pc端使用px，移動端使用em
提高css模塊重用率
屬性使用簡寫
.content { margin:0 0 10px; }
類名前面不要有標籤名
.content { font-size: 1.2em; }
減少層級嵌套
.red { color: #666; }
使用類名代替過多層級
.block { display: block; }
顏色值使用16進制或rgba等，並簡寫
.title { color: #f00; }
儘可能精確地使用選擇器
.content > .title { color: #333; }
.content > .box > .title { color: #666; }
圖片相關
使用合適的圖片格式（png, jpg, gif, apng）
小圖標使用sprites技術拼合圖片
儘可能壓縮圖片大小
JS規範：
編碼格式
使用UTF-8編碼
註釋規範
頭部有模塊名，作者，修改日期，描述
/**
* sale4pos
*
* Author: wu.h1
* Date: 2014/12/16
* Description: Retail Sale4pos
*/
模塊註釋
/**
* refresh type
*/
函數註釋
//module name and description
書寫規範
換行縮進採用 4 個空格
結束行注意添加分號
一般使用單引號，不使用雙引號
屬性規範
使用一個 var 來聲明變量，多個使用逗號分隔
函數或變量使用駝峯式命名，類名首字母大寫，變量首字母小寫
提取公用方法， 提高函數重用率
避免使用 eval() 函數，使用jquery的parseJson函數
簡單情況使用三元條件判斷代替if else
代碼中不要直接使用數字，而是事先將數字保存至一個變量或常量中
優化規範
JS文件儘量放在底部</body>前，head區的JS文件放在CSS文件後
頁面中間不要有JS代碼片段
合併JS文件，減少請求數
jQuery規範
注意選擇器性能
var $products = $(".products");
var $products = $(".products").find('div.id ');
指定查找範圍
$('.class', '#class-container');
避免使用隱式通配選擇器
$('.class input:radio');
使用數組來創建dom結構
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));
不要把CSS屬性寫在jQuery裏，使用class
$("#moduleName").addClass("error");
