web前端開發(fā)規(guī)范手冊

1、Web前端開發(fā)規(guī)范手冊前端開發(fā)規(guī)范手冊一、規(guī)范目的一、規(guī)范目的1.1概述.....................................................................................................................................1二、文件規(guī)范二、文件規(guī)范2.1文件命名規(guī)則.............................

2、............................................................................................12.2文件存放位置......................................................................................................................

3、....22.3css書寫規(guī)范..........................................................................................................................32.4html書寫規(guī)范.......................................................................

4、..................................................72.5Javript書寫規(guī)范.............................................................................................................112.6圖片規(guī)范.....................................

5、..............................................................................................122.7注釋規(guī)范.....................................................................................................................

6、..............132.8css瀏覽器兼容.......................................................................................................................13一、規(guī)范目的一、規(guī)范目的1.11.1概述概述為提高團隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護輸出高質(zhì)量的文檔特制訂此文檔.本規(guī)范文檔一經(jīng)

7、確認前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā).本文檔如有不對或者不合適的地方請及時提出經(jīng)討論決定后可以更改此文檔.二、文件規(guī)范二、文件規(guī)范2.1文件命名規(guī)則文件命名規(guī)則文件名稱統(tǒng)一用小寫統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文

8、件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。a.HTML的命名原則引文件統(tǒng)一使用index.htmindex.htmlindex.asp文件名（小寫）css存放CSS文件2.3CSS書寫規(guī)范書寫規(guī)范基本原則：基本原則：CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。1.樣式為設(shè)計師自定義的新CSS樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名“.”“相應(yīng)樣式效果描述的單詞或

9、縮寫”例：“.shadow”文字樣式樣式名“.no”“字號”“行距”“顏色縮寫”例：“.no12”、“.no1224”2.義HTML樣式為設(shè)計師重新定義已有的HTML標簽樣式，影響全部的被設(shè)定標簽樣式，用于統(tǒng)一網(wǎng)頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hrbder:1pxdotted#3333333.態(tài)樣式為設(shè)計師對鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。該樣式寫法有2種：a.nav:linknav.a:lin

10、k第一種只能修飾標簽中；第二種可以修飾所有包含有標簽的其他標簽。頁面內(nèi)的樣式加載必須用鏈接方式注意細則：注意細則：1.協(xié)作開發(fā)及分工:i會根據(jù)各個模塊同時根據(jù)頁面相似程序事先寫好大體框架文件分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)共用css文件base.css由i書寫協(xié)作開發(fā)過程中每個頁面請務(wù)必都要引入此文件包含reset及頭部底部樣式此文件不可隨意修改2.class與id的使用:id是唯一的并是父級的class是可以重復(fù)的并是子級的所以id僅使用在

11、大的模塊上class可用在重復(fù)使用率高及子級中id原則上都是由我分發(fā)框架文件時命名的為Javript預(yù)留鉤子的除外3.為Javript預(yù)留鉤子的命名請以js_起始比如:js_hidejs_show4.class與id命名:大的框架命名比如headerfooterwrapperleftright之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫英文避免使用中文拼音盡量使用簡易的單詞組合總之命名要語義化簡明化.5.規(guī)避class與id命名(此條重

12、要若有不明白請及時與i溝通):a通過從屬寫法規(guī)避示例見db取父級元素idclass命名部分命名示例見dc重復(fù)使用率高的命名請以自己代號加下劃線起始比如i_cleardab兩條適用于在2中已建好框架的頁面如要在2中已建好框架的頁面代碼中加入新的div元素按a命名法則:...樣式寫法:#mainnav.firstnav.......按b命名法則:...樣式寫法:.main_firstnav.......6.css屬性書寫順序建議遵循布局定位