?Web前端文檔規(guī)范中的命名規(guī)則

為提高團(tuán)隊(duì)協(xié)作效率，便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)，輸出高質(zhì)量的文檔，特制訂此文檔。本規(guī)范文檔一經(jīng)確認(rèn)，前端開(kāi)發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁(yè)面開(kāi)發(fā)。

文件規(guī)范

1.html，css，js，images文件均歸檔至<系統(tǒng)開(kāi)發(fā)規(guī)范>約定的目錄中；

2.html文件命名：英文命名，后綴.htm.同時(shí)將對(duì)應(yīng)界面稿放于同目錄中，若界面稿命名為中文，請(qǐng)重命名與html文件同名，以方便后端添加功能時(shí)查找對(duì)應(yīng)頁(yè)面；

3.css文件命名：英文命名，后綴.css.共用base.css，首頁(yè)index.css，其他頁(yè)面依實(shí)際模塊需求命名.；

4.Js文件命名：英文命名，后綴.js.共用common.js，其他依實(shí)際模塊需求命名.

html書(shū)寫(xiě)規(guī)范

1.文檔類型聲明及編碼：統(tǒng)一為html5聲明類型；編碼統(tǒng)一為，書(shū)寫(xiě)時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)；

2.非特殊情況下樣式文件必須外鏈至...之間；非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部；

3.引入樣式文件或JavaScript文件時(shí)，須略去默認(rèn)類型聲明，寫(xiě)法如下：

4.引入JS庫(kù)文件，文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版，比如jquery-1.4.1.min.js；引入插件，文件名格式為庫(kù)名稱+插件名稱，比如jQuery.cookie.js；

5.所有編碼均遵循xhtml標(biāo)準(zhǔn)，標(biāo)簽&屬性&屬性命名必須由小寫(xiě)字母及下劃線數(shù)字組成，且所有標(biāo)簽必須閉合，包括br(
)，hr()等；屬性值必須用雙引號(hào)包括；

6.充分利用無(wú)兼容性問(wèn)題的html自身標(biāo)簽，比如span，em，strong，optgroup，label，等等；需要為html元素添加自定義屬性的時(shí)候，首先要考慮下有沒(méi)有默認(rèn)的已有的合適標(biāo)簽去設(shè)置，如果沒(méi)有，可以使用須以"data-"為前綴來(lái)添加自定義屬性，避免使用"data："等其他命名方式；

7.語(yǔ)義化html，如標(biāo)題根據(jù)重要性用h*(同一頁(yè)面只能有一個(gè)h1)，段落標(biāo)記用p，列表用ul，內(nèi)聯(lián)元素中不可嵌套塊級(jí)元素；

8.盡可能減少div嵌套，如

9.書(shū)寫(xiě)鏈接地址時(shí)，必須避免重定向，例如：href="http：//itaolun.com/"，即須在URL地址后面加上“/”；

10.在頁(yè)面中盡量避免使用style屬性，即style="…"；

11.必須為含有描述性表單元素(input，textarea)添加label，如須寫(xiě)成：

12.能以背景形式呈現(xiàn)的圖片，盡量寫(xiě)入css樣式中；

13.重要圖片必須加上alt屬性；給重要的元素和截?cái)嗟脑丶由蟭itle；

14.給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋，方便后臺(tái)添加功能；

15.特殊符號(hào)使用：盡可能使用代碼替代：比如<(<)&>(>)&空格()&?(?)等等；

16.書(shū)寫(xiě)頁(yè)面過(guò)程中，請(qǐng)考慮向后擴(kuò)展性；

17.class&id參見(jiàn)css書(shū)寫(xiě)規(guī)范.

css書(shū)寫(xiě)規(guī)范

1.編碼統(tǒng)一為utf-8；

2.協(xié)作開(kāi)發(fā)及分工：i會(huì)根據(jù)各個(gè)模塊，同時(shí)根據(jù)頁(yè)面相似程序，事先寫(xiě)好大體框架文件，分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為；共用css文件base.css由i書(shū)寫(xiě)，協(xié)作開(kāi)發(fā)過(guò)程中，每個(gè)頁(yè)面請(qǐng)務(wù)必都要引入，此文件包含reset及頭部底部樣式，此文件不可隨意修改；

3.class與id的使用：id是唯 一的并是父級(jí)的，class是可以重復(fù)的并是子級(jí)的，所以id僅使用在大的模塊上，class可用在重復(fù)使用率高及子級(jí)中；id原則上都是由我分發(fā)框架文件時(shí)命名的，為JavaScript預(yù)留鉤子的除外；

4.為JavaScript預(yù)留鉤子的命名，請(qǐng)以js_起始，比如：js_hide，js_show；

5.class與id命名：大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫(xiě)英文&數(shù)字&_來(lái)組合命名，如i_comment，fontred，width200；避免使用中文拼音，盡量使用簡(jiǎn)易的單詞組合；總之，命名要語(yǔ)義化，簡(jiǎn)明化.

6.規(guī)避class與id命名(此條重要，若有不明白請(qǐng)及時(shí)與i溝通)：

a）通過(guò)從屬寫(xiě)法規(guī)避，示例見(jiàn)d；

b）取父級(jí)元素id/class命名部分命名，示例見(jiàn)d；

c）重復(fù)使用率高的命名，請(qǐng)以自己代號(hào)加下劃線起始，比如i_clear；

d）a，b兩條，適用于在2中已建好框架的頁(yè)面，如，要在2中已建好框架的頁(yè)面代碼

按a命名法則：

樣式寫(xiě)法：#mainnav .firstnav{.......}

按b命名法則：

樣式寫(xiě)法：.main_firstnav{.......}

7.css屬性書(shū)寫(xiě)順序，建議遵循：布局定位屬性-->自身屬性-->文本屬性-->其他屬性.此條可根據(jù)自身習(xí)慣書(shū)寫(xiě)，但盡量**同類屬性寫(xiě)在一起.屬性列舉：布局定位屬性主要包括：display&list-style&position（相應(yīng)的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.書(shū)寫(xiě)代碼前，考慮并提高樣式重復(fù)使用率；

9.充分利用html自身屬性及樣式繼承原理減少代碼量，比如：

定義

ul.listli{position：relative} ul.listlispan{position：absolute；right：0}

即可實(shí)現(xiàn)日期居右顯示

10.樣式表中中文字體名，請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼，以避免編碼錯(cuò)誤時(shí)亂碼；

11.背景圖片請(qǐng)盡可能使用sprite技術(shù)，減小http請(qǐng)求，考慮到多人協(xié)作開(kāi)發(fā)，sprite按模塊制作；

12.使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽)，請(qǐng)不要用width/height/cellspacing/cellpadding等table屬性直接定義表現(xiàn)，應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn)，如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文件中我會(huì)初始化表格樣式)

13.杜絕使用兼容ie8；

14.用png圖片做圖片時(shí)，要求圖片格式為png-8格式，若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果，請(qǐng)為ie6單獨(dú)定義背景：

_background：none；_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=’img/bg.png’)；

15.避免兼容性屬性的使用，比如text-shadow||css3的相關(guān)屬性；

16.減少使用影響性能的屬性，比如position：absolute||float；

17.必須為大區(qū)塊樣式添加注釋，小區(qū)塊適量注釋；

18.代碼縮進(jìn)與格式：建議單行書(shū)寫(xiě)，可根據(jù)自身習(xí)慣，后期優(yōu)化i會(huì)統(tǒng)一處理。