規范目的：為了提高工作效率，便于后臺人員添加功能及前端后期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構。
規范基本準則：符合web標準，使用具有語義的標簽，使結構、表現、行為分離，兼容性優良。頁面性能優化，代碼簡潔、明了、有序，盡可能的減少服務器的負載，保證最快的解析速度。
設計篇
Zeplin 有很好的標注和直觀的尺寸便于前端人員開發,
微信小程序：
IPhone6為主稿設計一款即可， 輸出2倍圖。
底部的icon需要在四周進行預留位置
H5:
以開發篇列出的Vue組件庫的組件樣式來設計頁面
例如頁面中需要的搜索框 提示欄 多選框等。
具體細節根據項目需求和開發同事溝通在進行高保真圖的輸出。
前端開發篇 （可進行補充）
主框架:Vue.js
Vue組件庫 根據項目具體來選型:
Element UI——一套基于 Vue 2.0 的桌面端組件庫
https://www.v2ex.com/t/308080
iView:一套基于 Vue 的高質量 UI 組件庫
https://www.iviewui.com/
Mint UI —— 基于 Vue.js 的移動端組件庫
http://mint-ui.github.io/#!/zh-cn
UI框架：
uikit
http://www.getuikit.net/
Bootstrap
http://www.bootcss.com/
微信小程序規范：
樣式庫統一使用微信原生視覺的WEUI
https://github.com/Tencent/weui-wxss
公司小程序初始版（開發中）
https://gitee.com/lovemyx/templet.git
微信小程序中template的模板使用
每一次小程序開發中重復的模塊都制作成 template 項目結束后 將模塊抽離放入公共碼云
小程序公共template
?https://gitee.com/lovemyx/public_template.git
僅存與tabBar單頁面路徑的在同一個文件夾下 如：
統一接口地址保存在app.js中供全局調用
盡量熟悉使用ES6規范來寫JS
第三方插件一律放入untils中
良好的注釋 代碼整潔
以下根絕個人習慣選擇
一、文件規范
1.1 HTML部分
1.1.1 建包問題
文件均歸檔至約定的目錄中，建包格式如下：
注意：所有的css文件放在css文件夾中，image放在images文件夾中，js放在js文件夾中
1.1.2 HTML頭部編寫
(1)?編碼：所有編碼均采用xhtml/html，標簽必須閉合，編碼統一為UTF-8，在多語言的網站建議添加，說明內容是以中文顯示和閱讀為基礎的
(2)?語義化：正確使用標簽，充分利用無兼容性問題的html自身標簽
(3)?文件頭部head內容：
? title:?需要添加標題
? 編碼: charset=UTF-8
? meta: 可以添加description、keywords內容
1.2 CSS部分
1.2.1 CSS種類及其命名
可以將CSS樣式表分為三類：全局樣式表、模塊通用樣式表和獨立樣式表
??全局樣式表常用命名：public.css
??模塊通用樣式表命名：模塊名_basic.css
??獨立樣式表：模塊名_頁面名.css
二、注釋規范
2.1 頂部文檔注釋（推薦使用）
1/*2* @description: 中文說明3* @author: name4* @update: name(xxxx-xx-xx xx:xx)5*/
2.2 屬性注釋
1/*Header*/2/*Nav*/3/*Container*/4...5/*Footer*/
2.3 功能模塊注釋
1/*module: module1 by 小王*/
注意：
? 每一個文檔對應一個文檔注釋（主要注釋內容包括：文檔創建人、創建時間、主要內容描述等）
? 屬性注釋說明：可以分CSS屬性來進行命名（如：margin/padding值、CSS Hack、全局Hover等）
? 功能模塊注釋說明：分模塊來編寫CSS樣式（如：頭部、導航、按鈕、頁腳等等）
三、命名規范
3.1 如何命名
??css最好用class來命名，js用id來命名，已做區分
? id和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名
3.2 命名示例
.div1{} /* 不推薦；無意義?*/
.a_green{}?/* 不推薦；無意義?*/
.menu{} /* 推薦；特殊性*/
.header{} /* 推薦；通用性*/
3.3 命名精簡
id和class命名越精簡越好，只要足夠表達意思，這樣有助于理解，同時也能提高代碼效率
.navigation{} /* 不推薦 */
.login_box_inside_con{} /* 不推薦 */
.nav{} /* 推薦 */
3.4 命名嵌套問題
書寫css要注意先后順序和嵌套問題，從性能上考慮盡量減少選擇器的層級
.nav ul.list{} /* 不推薦 */
.nav .list{} /* 推薦 */
3.5 注意事項
規則命名中，一律采用小寫加下劃線的方式
命名中盡量避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合
命名注意縮寫，但是不能盲目縮寫
不允許通過1、2、3等序號進行命名
避免class與id重名
id注意用于標識模塊或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
class用于標識某一個類型的對象，命名必須言簡意賅
盡可能提高代碼模塊的復用，樣式盡量用組合的方式
規則名稱中不應該包含顏色、定位等與具體顯示效果相關的信息，應該用意義命名，而不是結果名稱
四、書寫規范
4.1 排版規范
使用4tab來縮進
規則可以寫成單行。或者多行，但是整個文件內的規則排版必須統一
書寫風格：
每一個屬性值必須添加分號
如果多個屬性公用一個樣式集，則多個屬性必須寫成多行形式
4.2 屬性編寫順序（一般遵循顯示屬性 -> 自身屬性 -> 文本屬性 -> 其他屬性的書寫格式）
顯示屬性：display/list-style/position/float/clear...
自身屬性（盒模型）：width/height/margin/padding/border
背景：background
行高：line-height
文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
其他：cursor/z-index/zoom/overflow...
CSS3屬性：transform/transition/animation/box-shadow/border-radius
如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-/std的順序進行添加，標準屬性寫在最后
鏈接的樣式請嚴格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active
4.3 代碼性能優化
合并margin、padding、border的-top/-right/-bottom/-left的設置，盡量使用短名稱
選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置
禁止在css中使用*選擇符
0后面不需要單獨，比如0px可以省略成0，0.8px可以省略成.8px
如果可以顏色盡量用三位字符表示，比如#ccc
如果沒有邊框時，不要寫成border:0;應該寫成border:none
在保存代碼解耦的前提下，盡量合并重復的樣式
background、font等可以縮寫的屬性，盡量使用縮寫形式
能以背景形式呈現的圖片，盡量都寫入CSS樣式中
注意：X-UA-Compatible這個是IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式
中的chrome=1效果是如果安裝了GCF，則使用GCF來渲染頁面，如果未安裝GCF，則使用最高版本的IE內核進行渲染
4.6 字體規則
為了防止文件合并及編碼轉換時造成問題，建議將樣式中文字體名字改成對應的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(Microsoft Yahei)
字體粗細采用具體數值，粗體bold寫成700，正常normal寫成400
font-size必須以px為單位
為了對font-family取值進行統一，更好的支持各個操作系統上各個瀏覽器的兼容性，font-family不允許在業務代碼中隨意設置
五、其他規范
不要輕易改動全站級CSS和通用CSS庫，改動后，要經過全面測試
避免使用filter
避免在CSS中使用expression
避免過小的背景圖片平鋪
盡量不要在CSS中使用!important
絕對不要在CSS中使用"*"選擇符
層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高級(最高級為999)，不同彈窗氣泡之間可在三位數之間調整，普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比
背景圖片在情況允許，盡可能使用sprite技術，減小http請求，考慮到多人協作開發，sprite按照模塊、業務、頁面來劃分
頁面內部盡量避免使用style屬性，CSS放在head標簽中，由link標簽引入，使頁面的結構與表現分離
盡量減少使用float、position等影響性能的屬性，這樣可以避免新手在布局時出現的混亂
盡量少使用
來斷行
不要連續出現多個 (空格)，也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用text-indent、maring/padding等方法來實現
排版如果遇到需要首行縮進的處理，可以使用text-indent:2em;
圖片如果需要加載就在頁面上用img標簽寫出，并指明寬高，重要的圖片必須加上alt屬性，給重要的元素和截斷的元素上加上title
如果有跳轉的地方，統一使用a標簽，，需要跳轉到新頁面，則還需要加上targent="_blank"屬性，如果點擊的是空鏈接(#)，則會自動將當前頁面重置到首端，可以使用"javascript:void()"來替代原來的"#"
分清楚什么情況下jpg/gif/png圖片
六、 自適應頁面布局（響應式布局，暫不考慮低版本IE兼容性）
6.1 布局細節
首先頭部head中加入meta新標簽
position：不能使用絕對定位
width/height/margin/padding: 不能使用px，應該使用百分比、auto或em
font: 不能使用絕對大小，應使用em
6.2 CSS3引入的Media Query模塊，可自動探測屏幕寬度
加載相應的CSS文件，建議根據不同的屏幕分辨率，選擇應用不同的CSS規則，如：@media screen and (max-width:799px) {...}
圖片自適應：img{max-width:100%;}
七、幫助文檔
7.1 全局樣式寫法（reset css）
7.2 清浮動
需要清除浮動的地方有：
若子元素浮動，而父元素內容塌陷（也就是沒有包?。?/p>
布局出現混亂，譬如下一層的跑到上一層去了
解決辦法（四種方法）
給父元素同樣適用浮動，保證子元素與父元素浮動后還是在同一層
正確使用overflow:hidden;總所周知，overflow:hidden主要意思是溢出隱藏的意思，但是同樣有清浮動的效果
在需要的元素下面添加
，CSS中：clear{clear:both;}（不推薦，增加代碼，冗余）
使用clearfix來清除浮動（推薦），相當于創建一個隱形的內容為空的塊的目標元素來清除浮動
.clearfix{*zoom:1;} /* 針對IE7 hack，觸發IE7的haslayout，以清除浮動 */
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
7.3 各大網站的字體樣式：
Google: font-family:arial, sans-serif;
Yahoo: font:13px/1.25 "Helvetica Neue",Helvetica,Arial;
Apple: font:12px/18px "Lucida Grande", "Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
Baidu: font:12px arial;
taobao:?font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
Weibo: font:12px/1.125 Arial,Helvetica,sans-serif;
Tencent: font:12px "宋體","Arial Narrow",HELVETICA;
Sina Weibo:?font:12px/1.3 "Arial","Microsoft YaHei";
Sina: font:12px/20px "SimSun","宋體","Arial Narrow",HELVETICA;
JD:?font:12px/150% Arial,Verdana,"宋體";
zhihu: font-family:'Helvetica Neue', Helvetiva,Arial,Sans-serif;
默認字體樣式：
兼容性好：font-family:Helvetica,Tahoma,Arial,Sans-serif;
更接近設計：font-family:Geogia,"Times New Roman",Times,serif;
7.4文本多行顯示添加省略號（文本溢出省略）
給需要的標簽添加具體寬度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
7.5 input框的具體樣式
input框行高問題，一般不需要寫line-height，但是在IE8/IE7需要寫hack
