Web前端開發(fā)設(shè)計(jì)規(guī)范

Web前端開發(fā)設(shè)計(jì)規(guī)范

1.0

編寫：鄔畏畏

時(shí)間：201*-12

博客：

目錄

一．結(jié)構(gòu)設(shè)計(jì)...........................................................................................3二．CSS命名設(shè)計(jì)...................................................................................3三．CSS用的圖片信息...........................................................................4四．暫無(wú)...................................................................................................4

一．結(jié)構(gòu)設(shè)計(jì)

使用符合W3C標(biāo)準(zhǔn)的結(jié)構(gòu)標(biāo)簽元素，使得結(jié)構(gòu)和表現(xiàn)能夠很好的分離。盡可能采用DIV和語(yǔ)義化的標(biāo)簽結(jié)構(gòu)，使用CSS去表現(xiàn)HTML結(jié)構(gòu)中的樣式。

二．CSS命名設(shè)計(jì)

如果一個(gè)web系統(tǒng)比較復(fù)雜，我們會(huì)寫一些比較多的樣式而每個(gè)樣式的命名就顯得特別重要，本人（鄔畏畏）總結(jié)了一下命名特點(diǎn)，希望能給大家有所幫助。

（一）頁(yè)面的整體框架結(jié)構(gòu)的CSS樣式命名使用ID選擇器，

命名符合結(jié)構(gòu)布局的含義。

（二）通用功能的頁(yè)面元素部分，CSS樣式要使用類選擇器，

方便多次使用。

（三）如果要區(qū)分不同的頁(yè)面CSS樣式，可以采用前綴命名法

并使用“_”下劃線來(lái)鏈接，如首頁(yè)的樣式可以是#Index_Main，子頁(yè)面的樣式可以是#Sub_Main。如果是本頁(yè)面的結(jié)構(gòu)是嵌套的可以使用“-”減號(hào)來(lái)命名樣式名如.Index_Main-User，這樣就是到這個(gè)樣式是干什么的了也不容易發(fā)生沖突。

（四）除了上面第三條，我們還可以使用后代選擇器，如

“#Index_Main.Login”表達(dá)了#Index_Main選擇器元素內(nèi)的.Login的選擇器樣式。

（五）如果CSS樣式文件里的樣式過多，我們?cè)谝粋�(gè)頁(yè)面中可

能只用一部分樣式，那么我們可以按功能把樣式寫到不能功能的CSS文件中，某個(gè)頁(yè)面需要就可以按照功能引入不同的樣式文件。

三．CSS用的圖片信息

對(duì)于一個(gè)大型的web項(xiàng)目我們可能用到很多圖片，所以在開發(fā)中不同功能的圖片要分開存儲(chǔ)或按照網(wǎng)站的頁(yè)面級(jí)別或類別，如首頁(yè)放到一個(gè)文件夾里，子頁(yè)面放到一個(gè)文件夾里，通用的圖片放到一個(gè)文件夾里；這樣既保證了圖片重名問題，在更換樣式也方便。

四．暫無(wú)

擴(kuò)展閱讀：WEB前端開發(fā)規(guī)范

WEB前端開發(fā)規(guī)范

目錄

1、規(guī)范目的2、基本準(zhǔn)則3、文件規(guī)范4、文件規(guī)范

5、html書寫規(guī)范6、css書寫規(guī)范

7、JavaScript書寫規(guī)范8、圖片規(guī)范9、注釋規(guī)范

10、開發(fā)及測(cè)試工具約定11、其他規(guī)范12、CSSHack1

規(guī)范目的

為提高團(tuán)隊(duì)協(xié)作效率,便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,同是為網(wǎng)站有一個(gè)更好的前端架構(gòu)，網(wǎng)站的發(fā)展及未來(lái)打好一個(gè)基礎(chǔ)。本文檔如有不對(duì)或者不合適的地方請(qǐng)?zhí)岢鰜?lái),

基本準(zhǔn)則

符合web標(biāo)準(zhǔn),語(yǔ)義化html,結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良.頁(yè)面性能方面,代碼要求簡(jiǎn)潔明了有序,盡可能的減小服務(wù)器負(fù)載,保證最快的解析速度.文件規(guī)范

3.1、html,css,js,images文件均歸檔至約定的目錄中;

23

3.2、html文件命名:命名以中文命名，依實(shí)際模塊命名，如果同一模塊以_&title&_來(lái)組合命名,以方便添加功能時(shí)查找對(duì)應(yīng)頁(yè)面，團(tuán)結(jié)里的相互理解。

例如：我的好股網(wǎng)里的TAB命名

大模塊名稱_小模塊的titile.html我的好股網(wǎng)_關(guān)注的微博.html

3.3、css文件命名:英文命名,后綴.css.初始化樣式reset.css，其他樣式依實(shí)際模塊頁(yè)面需求命名，共用樣式一般以模塊考慮來(lái)劃分命名,如有改版修改的css文件可以采用&_時(shí)間日期

例如：微博改版

版塊名稱_時(shí)間日期.cssnew_blog_1212.css

4.4、Js文件命名:英文命名,后綴.js.共用common.js,其他依實(shí)際模塊需求命名.5.5、圖片命名:4

html書寫規(guī)范

4.1、文檔類型聲明及編碼:統(tǒng)一用;編碼統(tǒng)一為。目的:統(tǒng)一性和網(wǎng)站提高開發(fā)合作效率。

4.2、非特殊情況下樣式文件必須外鏈至之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部之前;目的:網(wǎng)站的優(yōu)化。

4.3、所有編碼均遵循xhtml標(biāo)準(zhǔn),標(biāo)簽&屬性&屬性命名必須由小寫字母及下劃線數(shù)字組成,且所有標(biāo)簽必須閉合,包括br(),hr()等;屬性值必須用雙引號(hào)包括;目的:更加符合web標(biāo)準(zhǔn)(w3c),也有利于seo。4.4、充分利用無(wú)兼容性問題的html自身標(biāo)簽,比如span,em,strong,optgroup,label,等等目的：減少代碼量

4.5、語(yǔ)義化html,如標(biāo)題根據(jù)重要性用h*(同一頁(yè)面只能有一個(gè)h1),段落標(biāo)記用p,列表用ul,內(nèi)聯(lián)元素中不可嵌套塊級(jí)元素;目的：減少代碼量，也有利于seo

4.5、盡可能減少div嵌套,如4.11、給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺(tái)程序員嵌套模版;

4.12、特殊符號(hào)使用:盡可能使用代碼替代:比如)&空格()&()等等;4.13、書寫頁(yè)面過程中,請(qǐng)考慮向后擴(kuò)展性;5

css書寫規(guī)范

5.1編碼統(tǒng)一為utf-8;都用小寫

5.2class與id的使用:一般都使用class，特殊除外，因id的優(yōu)先級(jí)比class的高5.3樣式命名推薦使用英文避免使用漢語(yǔ)拼音,盡量使用簡(jiǎn)易的單詞組合;命名方式參照《WEB前端開

發(fā)CSS命名參考》。命名方式采用駝峰命名法和劃線命名法兩種，提高可讀性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。駝峰命名法用來(lái)區(qū)別不同的單詞。劃線命名法表明從屬關(guān)系。如：“.timeList”和“.time_list”分別表示時(shí)間列表和時(shí)間部分下的列表。5.4css屬性書寫順序,建議遵循布局定位屬性>自身屬性>文本屬性>其他屬性.此條可根據(jù)

自身習(xí)慣書寫,但盡量保證同類屬性寫在一起.1.定位屬性（比如：display,position,float,clear,visibility,table-layout等）2.自身屬性（比如：width,height,margin,padding,border等）3.文本屬性（比如：font,line-height,text-align,text-indent,vertical-align等）4.其他屬性（比如：color,background,opacity,cursor,content,list-style,quotes等）

5.5避免濫用自選擇器。#testspan｛｝和#test.span｛｝盡量選擇后者。采用繼承屬性還是新加

class根據(jù)不同情況靈活運(yùn)用。新加class便于擴(kuò)展維護(hù)。繼承屬性示例：這兒是標(biāo)題列表201*-09-15樣式表：ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可實(shí)現(xiàn)日期居右顯示5.6樣式表中中文字體名,請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯(cuò)誤時(shí)亂碼;

5.7使用table標(biāo)簽時(shí),請(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ì)初始化表格樣式)5.8盡量不使用兼容ie8,和代碼*html

寫法。

5.9用png圖片做圖片時(shí),要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效

果,請(qǐng)參考文檔《IE6下png透明問題解決的最佳方案》

5.10兼容性屬性的使用,比如text-shadow（文字陰影）、css3的相關(guān)屬性在保證目前主流瀏覽器使

用正常的情況下可以使用來(lái)對(duì)頁(yè)面進(jìn)行錦上添花式的設(shè)計(jì)。

5.11減少使用影響性能的屬性,比如position:absolute||float;5.12必須為大區(qū)塊樣式添加注釋,小區(qū)塊適量注釋;5.13代碼縮進(jìn)與格式:單行書寫,統(tǒng)一使用tab進(jìn)行縮進(jìn)。;

目的：css書寫規(guī)范主要提高效率方便面想關(guān)人員的修改，提高網(wǎng)站的擴(kuò)展性(根據(jù)網(wǎng)站情況不一樣，要靈活應(yīng)用)6

JavaScript書寫規(guī)范

6.1文件編碼統(tǒng)一為utf-8,書寫過程過,每行代碼結(jié)束必須有分號(hào);要檢查網(wǎng)上down下來(lái)的代碼造

成的代碼污染(沉冗沖突，代碼注入)等，有的可以firefox的一些擴(kuò)展插件分析;6.2庫(kù)引入:原則上僅引入jQuery庫(kù),若需引入第三方庫(kù),須與團(tuán)隊(duì)其他人員討論決定;6.3命名語(yǔ)義化,盡可能利用英文單詞或其縮寫;6.4代碼結(jié)構(gòu)明了,加適量注釋.提高函數(shù)重用率;6.5注重與html分離,減小reflow,注重性能.目的：避免帶來(lái)的問題及沖突，網(wǎng)站的優(yōu)化。7

圖片規(guī)范

7.1所有頁(yè)面元素類圖片均放入img文件夾,7.2圖片格式僅限于gif||png||jpg;

7.3命名全部用小寫英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡

量用易懂的詞匯,便于團(tuán)隊(duì)其他成員理解;另,命名分頭尾兩部分,用下劃線隔開,比如ad_left01.gif||btn_submit.gif;

7.4在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量,以減少加載時(shí)間;7.5盡量避免使用半透明的png圖片(若使用,請(qǐng)參考css規(guī)范相關(guān)說(shuō)明);

7.6運(yùn)用csssprite技術(shù)集中小的背景圖或圖標(biāo),減小頁(yè)面http請(qǐng)求,但注意,請(qǐng)務(wù)必在對(duì)應(yīng)的

spritepsd源圖中劃參考線,并保存至img目錄下.

8注釋規(guī)范

8.1html注釋:注釋格式,“-”只能在注釋的始末位置,不可置入注釋文字區(qū)域;8.2css注釋:注釋格式/*這兒是注釋*/;

8.3JavaScript注釋,單行注釋使用“//這兒是單行注釋”,多行注釋使用/*這兒有多行注釋*/;

9開發(fā)及測(cè)試工具約定

9.1編碼必須格式化,比如縮進(jìn);

9.2測(cè)試工具:前期開發(fā)僅測(cè)試FireFox&IE6&IE7&IE8,后期優(yōu)化時(shí)加入Opera&Chrome;9.3建議測(cè)試順序:FireFox>IE7>IE8>IE6>Opera>Chrome,建議安裝firebug及IETab

Plus插件.安裝調(diào)試?yán)�器IETester

10其他規(guī)范

10.1開發(fā)過程中嚴(yán)格按分工完成頁(yè)面,以提高css復(fù)用率,避免重復(fù)開發(fā);10.2減小沉冗代碼,書寫所有人都可以看的懂的代碼.簡(jiǎn)潔易懂是一種美德.為用戶著想,為服務(wù)

器著想.11CSSHack

即便是完美的CSS也未必能在目前眾多的終端瀏覽器中呈現(xiàn)一致的效果，所以，CSSHack在很多情況下都是必要的，建議先以對(duì)CSS標(biāo)準(zhǔn)支持得比較好的瀏覽器（比如“Firefox”或者“Chrome”）為主編輯CSS，最后再處理IE的兼容性單獨(dú)為IE建立一個(gè)CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.css等），最后在HTML文件中，通過IE的條件注釋按需引用。

友情提示：本文中關(guān)于《Web前端開發(fā)設(shè)計(jì)規(guī)范》給出的范例僅供您參考拓展思維使用，Web前端開發(fā)設(shè)計(jì)規(guī)范：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《Web前端開發(fā)設(shè)計(jì)規(guī)范》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/585493.html

• 上一篇：WEB前端開發(fā)規(guī)范
• 下一篇：Java Web開發(fā)課程設(shè)計(jì)