Web前端開發規范文檔你需要知道的事--HTML、css、js、文檔等需要規范內容

      規范目的
　　
　　為提高團隊協作效率,便於后台人員添加功能及前端后期優化維護,輸出高質量的文檔,特制訂此文檔.本規范文檔一經確認,前端開發人員必須按本文檔規范進行前台頁面開發.本文檔如有不對或者不合適的地方請及時提出,經討論決定后方可更改.
　　
　　基本准則
　　
　　符合web標准,語義化html,結構表現行為分離,兼容性優良.頁面性能方面,代碼要求簡潔明了有序,盡可能的減小服務器負載,保證最快的解析速度.
　　
　　文件規范
　　
　　1.html,css,js,images文件均歸檔至<系統開發規范>約定的目錄中;
　　
　　2.html文件命名:英文命名,后綴.htm.同時將對應界面稿放於同目錄中,若界面稿命名為中文,請重命名與html文件同名,以方便后端添加功能時查找對應頁面;
　　
　　3.css文件命名:英文命名,后綴.css.共用base.css,首頁index.css,其他頁面依實際模塊需求命名.;
　　
　　4.Js文件命名:英文命名,后綴.js.共用common.js,其他依實際模塊需求命名.
　　
　　html書寫規范
　　
　　1.文檔類型聲明及編碼:統一為html5聲明類型;編碼統一為,書寫時利用IDE實現層次分明的縮進;
　　
　　2.非特殊情況下樣式文件必須外鏈至…之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;
　　
　　3.引入樣式文件或JavaScript文件時,須略去默認類型聲明.
　　
　　4.引入JS庫文件,文件名須包含庫名稱及版本號及是否為壓縮版,比如jquery-1.7.1.min.js;引入插件,文件名格式為庫名稱+插件名稱,比如jQuery.cookie.js;
　　
　　5.所有編碼均遵循xhtml標准,標簽&屬性&屬性命名必須由小寫字母及下划線數字組成,且所有標簽必須閉合;屬性值必須用雙引號包括;
　　
　　6.充分利用無兼容性問題的html自身標簽,比如span,em,strong,optgroup,label,等等;需要為html元素添加自定 義屬性的時候,首先要考慮下有沒有默認的已有的合適標簽去設置,如果沒有,可以使用須以”data-”為前綴來添加自定義屬性，避免使用”data:”等 其他命名方式;
　　
　　7.語義化html,如標題根據重要性用h(同一頁面只能有一個h1),段落標記用p,列表用ul,內聯元素中不可嵌套塊級元素;
　　
　　8.盡可能減少div嵌套
　　
　　9.書寫鏈接地址時,必須避免重定向，例如：href=”http://www.example.com/”,即須在URL地址后面加上“/”；
　　
　　10.在頁面中盡量避免使用style屬性,即style=”…”;
　　
　　11.必須為含有描述性表單元素(input,textarea)添加label
　　
　　12.能以背景形式呈現的圖片,盡量寫入css樣式中;
　　
　　13.重要圖片必須加上alt屬性;給重要的元素和截斷的元素加上title;
　　
　　14.給區塊代碼及重要功能(比如循環)加上注釋,方便后台添加功能;
　　
　　15.特殊符號使用:盡可能使用代碼替代:比如<(<)&>(>)&空格()&»(»)等等;
　　
　　16.書寫頁面過程中,請考慮向后擴展性;
　　
　　17.class&id參見css書寫規范.
　　
　　css書寫規范
　　
　　1.編碼統一為utf-8;
　　
　　2.協作開發及分工:i會根據各個模塊,同時根據頁面相似程序,事先寫好大體框架文件,分配給前端人員實現內部結構&表現&行為;共 用css文件base.css由i書寫,協作開發過程中,每個頁面請務必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;
　　
　　3.class與id的使用:id是唯一的並是父級的,class是可以重復的並是子級的,所以id僅使用在大的模塊上,class可用在重復使用率高及子級中;id原則上都是由我分發框架文件時命名的,為JavaScript預留鈎子的除外;
　　
　　4.為JavaScript預留鈎子的命名,請以js_起始,比如:js_hide,js_show;
　　
　　5.class與id命名:大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式 名稱由小寫英文&數字&_來組合命名,如i_comment,fontred,width200;避免使用中文拼音,盡量使用簡易的單詞 組合;總之,命名要語義化,簡明化.
　　
　　6.規避class與id命名(此條重要,若有不明白請及時與i溝通):
　　
　　a）通過從屬寫法規避,示例見d;
　　
　　b）取父級元素id/class命名部分命名,示例見d;
　　
　　c）重復使用率高的命名,請以自己代號加下划線起始,比如i_clear;
　　
　　d）a,b兩條,適用於在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼中加入新的div元素
　　
　　7.css屬性書寫順序,建議遵循:布局定位屬性–>自身屬性–>文本屬性–>其他屬性.此條可根據自身習慣書寫,但盡量保證同類 屬性寫在一起.屬性列舉:布局定位屬性主要包括:display&list-style&position（相應的 top,right,bottom,left）＆float&clear＆visibility＆overflow；自身屬性主要包 括:width&height&margin&padding&border&background;文本屬性 主要包括：color&font&text-decoration&text-align&vertical- align&white-space&其他&content;我所列出的這些屬性只是最常用到的,並不代表全部;
　　
　　8.書寫代碼前,考慮並提高樣式重復使用率;
　　
　　9.充分利用html自身屬性及樣式繼承原理減少代碼量,比如:
　　
　　●這兒是標題列表2012-04-24
　　
　　定義
　　
　　ul.listli{position:relative}ul.listlispan{position:absolute;right:0}
　　
　　即可實現日期居右顯示
　　
　　10.樣式表中中文字體名,請務必轉碼成unicode碼,以避免編碼錯誤時亂碼;
　　
　　11.背景圖片請盡可能使用sprite技術,減小http請求,考慮到多人協作開發,sprite按模塊制作;
　　
　　12.使用table標簽時(盡量避免使用table標簽),請不要用width/height/cellspacing/cellpadding等 table屬性直接定義表現,應盡可能的利用table自身私有屬性分離結構與表現,如 thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方 法:table{border:0;margin:0;border- collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我會初始化表格樣式)
　　
　　13.如何可以請少使用兼容;
　　
　　14.用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果,請為ie6單獨定義背景:
　　
　　_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’img/bg.png’);
　　
　　15.避免兼容性屬性的使用,比如text-shadow||css3的相關屬性;
　　
　　16.減少使用影響性能的屬性,比如position:absolute||float;
　　
　　17.必須為大區塊樣式添加注釋,小區塊適量注釋;
　　
　　18.代碼縮進與格式:建議單行書寫,可根據自身習慣,后期優化會統一處理;
　　
　　JavaScript書寫規范
　　
　　1.文件編碼統一為utf-8,書寫過程過,每行代碼結束必須有分號;原則上所有功能均根據XXX項目需求原生開發,以避免網上down下來的代碼造成的代碼污染(沉冗代碼||與現有代碼沖突||…);
　　
　　2.庫引入:原則上僅引入jQuery庫,若需引入第三方庫,須與團隊其他人員討論決定;
　　
　　3.變量命名:駝峰式命名.原生JavaScript變量要求是純英文字母,首字母須小寫,如iTaoLun;
　　
　　jQuery變量要求首字符為’_’,其他與原生JavaScript規則相同,如:_iTaoLun;
　　
　　另,要求變量集中聲明,避免全局變量.
　　
　　4.類命名:首字母大寫,駝峰式命名.如ITaoLun;
　　
　　5.函數命名:首字母小寫駝峰式命名.如iTaoLun();
　　
　　6.命名語義化,盡可能利用英文單詞或其縮寫;
　　
　　7.盡量避免使用存在兼容性及消耗資源的方法或屬性,比如eval_r()&innerText;
　　
　　8.后期優化中,JavaScript非注釋類中文字符須轉換成unicode編碼使用,以避免編碼錯誤時亂碼顯示;
　　
　　9.代碼結構明了,加適量注釋.提高函數重用率;
　　
　　10.注重與html分離,減小reflow,注重性能.
　　
　　圖片規范
　　
　　1.所有頁面元素類圖片均放入img文件夾,測試用圖片放於img/demoimg文件夾;
　　
　　2.圖片格式僅限於gif||png||jpg;
　　
　　3.命名全部用小寫英文字母||數字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯,便於團隊其他成員理解;另,命名分頭尾兩部分,用下划線隔開,比如ad_left01.gif||btn_submit.gif;
　　
　　4.在保證視覺效果的情況下選擇最小的圖片格式與圖片質量,以減少加載時間;
　　
　　5.盡量避免使用半透明的png圖片(若使用,請參考css規范相關說明);
　　
　　6.運用csssprite技術集中小的背景圖或圖標,減小頁面http請求,但注意,請務必在對應的spritepsd源圖中划參考線,並保存至img目錄下.
　　
　　注釋規范
　　
　　1.html注釋:注釋格式,‘–’只能在注釋的始末位置,不可置入注釋文字區域;
　　
　　2.css注釋:注釋格式;
　　
　　3.JavaScript注釋,單行注釋使用’//這兒是單行注釋’,多行注釋使用;
　　
　　開發及測試工具約定
　　
　　建議使用WebStorm||Aptana||Dw||Vim,亦可根據自己喜好選擇,但須遵循如下原則:
　　
　　1.不可利用IDE的視圖模式’畫’代碼;
　　
　　2.不可利用IDE生成相關功能代碼,比如Dw內置的一些功能js;
　　
　　3.編碼必須格式化,比如縮進;
　　
　　測試工具:前期開發僅測試FireFox&IE6&IE7&IE8&IE9&Opera&Chrome&Safari;
　　
　　其他規范
　　
　　1.開發過程中嚴格按分工完成頁面,以提高css復用率,避免重復開發;
　　
　　2.減小沉冗代碼,書寫所有人都可以看的懂的代碼.簡潔易懂是一種美德.為用戶着想,為服務器着想.
　　
　　文章來源： http://blog.jobbole.com/26961/