1. 書寫規範
1.1 項目命名規範
項目：用項目對應的英文單詞命名
文件及文件夾:
-
全部英文小寫字母，可以使用中線，不可出現其他字符，如login,my-order
-
調用 `/lib`裏面的文件需包含版本號，壓縮文件需包含`min`關鍵詞，其他插件則可不包含，如：`/lib/jquery.1.9.1.js`
1.2 格式&編碼
-
文本文件： `.xxx` UTF-8_\(無BOM\)_ 編碼
-
圖片文件： `.png` _(PNG-24)_ `.jpg` _(壓縮率8-12)_
-
動態圖片： `.gif`
-
壓縮文件： `.tar.gz` `.zip``.rar`
2. CSS 規範
2.1 CSS 命名規範
-
所有的命名用小寫的英文單詞
-
不使用簡單的方位詞直接命名，如"left"，"bottom"
-
不縮寫單詞，除非一看就明白的單詞
-
長名稱或詞組可以使用下劃線作爲連接符
-
避免選擇器嵌套層級過多，少於3級
-
不要隨意使用id，id應該按需使用，而不能濫用
-
使用CSS縮寫屬性 ，比如padding:0 10px 5px 5px等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
命名參考如下：
| CSS樣式命名 | 說明 |
|---|---|
| 網頁公共命名 | |
| wrapper | 頁面外圍控制整體佈局寬度 |
| container或content | 容器,用於最外層 |
| layout | 佈局 |
| head, header | 頁頭部分 |
| foot, footer | 頁腳部分 |
| nav | 主導航 |
| sub_nav | 二級導航 |
| menu | 菜單 |
| sub_menu | 子菜單 |
| side_bar | 側欄 |
| sidebar_l, sidebar_r | 左邊欄或右邊欄 |
| main | 頁面主體 |
| tag | 標籤 |
| msg message | 提示信息 |
| tips | 小技巧 |
| vote | 投票 |
| friendlink | 友情鏈接 |
| title | 標題 |
| summary | 摘要 |
| login_bar | 登錄條 |
| search_input | 搜索輸入框 |
| hot | 熱門熱點 |
| search | 搜索 |
| search_output | 搜索輸出和搜索結果相似 |
| search_bar | 搜索條 |
| search_results | 搜索結果 |
| copyright | 版權信息 |
| branding | 商標 |
| logo | 網站LOGO標誌 |
| site_info | 網站信息 |
| site_info_legal | 法律聲明 |
| site_info_credits | 信譽 |
| join_us | 加入我們 |
| partner | 合作伙伴 |
| service | 服務 |
| regsiter | 註冊 |
| arr arrow | 箭頭 |
| guild | 指南 |
| site_map | 網站地圖 |
| list | 列表 |
| home_page | 首頁 |
| sub_page | 二級頁面子頁面 |
| tool, toolbar | 工具條 |
| drop | 下拉 |
| dorp_menu | 下拉菜單 |
| status | 狀態 |
| scroll | 滾動 |
| tab | 標籤頁 |
| left right center | 居左、中、右 |
| news | 新聞 |
| download | 下載 |
| banner | 廣告條(頂部廣告條) |
2.2 CSS 書寫規範
向"無ID，無層級，無標籤"準則靠攏，可有效提高重用性，減小文件大小，提升渲染效率
2.3 CSS 註釋格式
用來區分頁面的註釋，如/******************************************產品中心****************************************/
模塊的註釋,如/*首頁導航欄*/
2.4 CSS各屬性的排列順序：不做硬性要求
-
Positioning（定位，如position，top，z-index）
-
Box model（盒模型，如display，box-sizing，width，border）
-
Typographic（排版，如font，line-height，text-align）
-
Visual（視覺，如background，color,opacity）
-
Other（其他，如cursor）
由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。 其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。
2.5 CSS格式化
使用不換行方式書寫，增加書寫速度
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 CSS字體單位
-
px像素（Pixel），相對長度單位，像素px是相對於顯示器屏幕分辨率而言的。
-
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
-
rem也是相對長度單位，但相對的只是HTML根元素。
-
vw代表視窗(Viewport)的寬度爲1%，如果視窗寬度爲1000px，那麼50vw = 500px
-
vh代表窗口高度的百分，如果視窗高度爲800px，那麼50vh = 400px
-
公司項目使用時注意事項：現有項目都是使用px作爲單位，現推薦使用rem,vw,vh作爲單位
3. JS 規範
3.1 JS命名規範
3.1.1 JS 變量命名
命名方法：小駝峯式命名
命名規範：前綴應當是名詞。(函數的名字前綴爲動詞，以此區分變量和函數)
命名建議：儘量在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示爲字符串類型。
示例
// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable';
// 不好的命名方式var setCount = 10;var getTitle = 'LoginTable';
3.1.2 JS 函數命名
命名方法：小駝峯式命名法
命名規範：前綴應當爲動詞
命名建議：可使用常見動詞約定
| 動詞 | 含義 | 返回值 |
| can | 判斷是否可執行某個動作(權限) | 函數返回一個布爾值。true：可執行；false：不可執行 |
| has | 判斷是否含有某個值 | 函數返回一個布爾值。true：含有此值；false：不含有此值 |
| is | 判斷是否爲某個值 | 函數返回一個布爾值。true：爲某個值；false：不爲某個值 |
| get | 獲取某個值 | 函數返回一個非布爾值 |
| set | 設置某個值 | 無返回值、返回是否設置成功或者返回鏈式對象 |
| load | 加載某些數據 | 無返回值或者返回是否加載完成的結果 |
3.1.3 JS 常量命名
命名方法：名稱全部大寫
命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞
示例
var MAX_COUNT = 10;var URL = 'https://blog.csdn.net/u014789708';
3.1.4 JS 文件命名
使用短線（-）或句點（.）作爲分隔符號，推薦使用句點，最好使用小寫英文字符，不要使用其他符號和擴展字符，如 jQuery UI 1.9.0 的源文件可命名爲"jquery-ui-1.9.0.js"
使用 .js 擴展名，這個擴展名的兼容性最好。其實任何擴展名都可以，只要是 text 類型、編碼正確即可
用句點分隔表示名稱中的從屬關係，範圍大的在前，如jQuery 的表單插件 Form既可以命名爲jquery.form.js
3.2 js 註釋格式
使用多行註釋,以/*開頭，*/結尾
3.3 js 注意事項
書寫格式
-
JS 換行縮進：採用tab（打散爲4個空格）
-
結束行需添加分號`;`
性能
-
儘量選用局部變量而不是全局變量
-
儘量使用鏈式寫法
-
儘量減少DOM調用
-
將js腳本放到頁面底部
-
使用jquery的data來存取數據，減少對dom的操作
-
使用on方法綁定事件，這是jquery的推薦使用
-
選擇器的選擇：儘量不用標籤選擇器，能用ID選擇器的就不用class選擇器
4. HTML 規範
4.1 標籤使用規範
儘量減少標籤層級
雙標籤必須閉合，單標籤用斜線閉合
HTML第一行統一使用HTML5標準<!DOCTYPE html>
一律統一標籤結尾斜槓的書寫形式：`<br />` `<hr />` 注意之間空格
避免使用已過時標籤，如：`<font>` `<frame>` `<s>`
`<img>`標籤默認缺省格式：`<img src="#" alt="缺省時文字" />`
`<a>`標籤缺省格式：`<a href="#" title="鏈接名稱">xxx</>` 注：`target="_blank"` 根據需求決定
style、link、script可省略type屬性，因爲 text/css 和 text/javascript 分別是他們的默認值
4.2 HTML註釋
<!--內容-->
<div class="content">
<p>content</p>
</div>
4.3 注意事項
手機端的自適應佈局儘量採用彈性佈局，而不是百分比
`css`文件都 置於頭部
HTML換行縮進：採用 tab空格
其他效果`js`及`統計代碼` 文件置於尾部
手機端的頁面都按750px來做，顯示效果按375px
5. Image 規範
5.1 圖片規範
圖片大小：切圖時使用web格式保存，減小圖片大小
圖片尺寸：一律採用整數，如20X20，50X50
圖片合併：小圖片一律要合併，並保存對應的psd文件，以便後期修改