前端規(guī)范大總結(jié)

番茄西紅柿發(fā)布于2019-04-23 13:26 / 2706人閱讀

摘要：目的為了提高工作效率，便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)，輸出高質(zhì)量的文檔，在網(wǎng)站建設(shè)中，使結(jié)構(gòu)更加清晰，代碼簡(jiǎn)明有序，有一個(gè)更好的前端架構(gòu)。基本準(zhǔn)則符合標(biāo)準(zhǔn)，使用具有語(yǔ)義的標(biāo)簽，使結(jié)構(gòu)表現(xiàn)行為分離，兼容性優(yōu)良。

目的：為了提高工作效率，便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)，輸出高質(zhì)量的文檔，在網(wǎng)站建設(shè)中，使結(jié)構(gòu)更加清晰，代碼簡(jiǎn)明有序，有一個(gè)更好的前端架構(gòu)。

基本準(zhǔn)則：符合web標(biāo)準(zhǔn)，使用具有語(yǔ)義的標(biāo)簽，使結(jié)構(gòu)、表現(xiàn)、行為分離，兼容性優(yōu)良。頁(yè)面性能優(yōu)化，代碼簡(jiǎn)潔、明了、有序，盡可能的減少服務(wù)器的負(fù)載，保證最快的解析速度。

一、文件規(guī)范

1.1 HTML部分

　　1.1.1 建包問題

　　　　文件均歸檔至約定的目錄中，建包格式如下：

　　　　注意：所有的css文件放在css文件夾中，image放在images文件夾中，js放在js文件夾中

　　1.1.2 HTML頭部編寫

　　　　(1) 編碼：所有編碼均采用xhtml/html，標(biāo)簽必須閉合，編碼統(tǒng)一為UTF-8，在多語(yǔ)言的網(wǎng)站建議添加，說明內(nèi)容是以中文顯示和閱讀為基礎(chǔ)的

　　　　(2) 語(yǔ)義化：正確使用標(biāo)簽，充分利用無(wú)兼容性問題的html自身標(biāo)簽

　　　　(3) 文件頭部head內(nèi)容：

　　　　　　• title: 需要添加標(biāo)題

　　　　　　• 編碼: charset=UTF-8

　　　　　　• meta: 可以添加description、keywords內(nèi)容

1.2 CSS部分

　　1.2.1 CSS種類及其命名

　　　　可以將CSS樣式表分為三類：全局樣式表、模塊通用樣式表和獨(dú)立樣式表

　　　　　　• 全局樣式表常用命名：public.css

　　　　　　• 模塊通用樣式表命名：模塊名_basic.css

　　　　　　• 獨(dú)立樣式表：模塊名_頁(yè)面名.css

　　1.2.2 CSS引入

　　　　CSS文件引入可通過外聯(lián)或者內(nèi)聯(lián)方式引入

　　• 外聯(lián)方式

　　• 內(nèi)聯(lián)方式

　　　　注意：link和style標(biāo)簽都應(yīng)該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用@import，嵌套不要超過一層。

二、注釋規(guī)范

2.1 頂部文檔注釋（推薦使用）

1 /*
2 * @description: 中文說明
3 * @author: name
4 * @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 小王 */
2 ...
3 /* module: module2 by 小李 */

2.4 特殊注釋

 1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默認(rèn)寬度為1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

　　注意：

　　　　• 每一個(gè)文檔對(duì)應(yīng)一個(gè)文檔注釋（主要注釋內(nèi)容包括：文檔創(chuàng)建人、創(chuàng)建時(shí)間、主要內(nèi)容描述等）

　　　　• 屬性注釋說明：可以分CSS屬性來(lái)進(jìn)行命名（如：margin/padding值、CSS Hack、全局Hover等）

　　　　• 功能模塊注釋說明：分模塊來(lái)編寫CSS樣式（如：頭部、導(dǎo)航、按鈕、頁(yè)腳等等）

三、命名規(guī)范

3.1 如何命名

　　• css最好用class來(lái)命名，js用id來(lái)命名，已做區(qū)分

　　• id和class的命名應(yīng)反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名

3.2 命名示例

.div1{} /* 不推薦；無(wú)意義 */
.a_green{} /* 不推薦；無(wú)意義 */
.menu{} /* 推薦；特殊性*/
.header{} /* 推薦；通用性*/

3.3 命名精簡(jiǎn)

　　id和class命名越精簡(jiǎn)越好，只要足夠表達(dá)意思，這樣有助于理解，同時(shí)也能提高代碼效率

.navigation{} /* 不推薦 */
.login_box_inside_con{} /* 不推薦 */
.nav{} /* 推薦 */

3.4 命名嵌套問題

　　書寫css要注意先后順序和嵌套問題，從性能上考慮盡量減少選擇器的層級(jí)

.nav ul.list{} /* 不推薦 */
.nav .list{} /* 推薦 */

3.5 注意事項(xiàng)

規(guī)則命名中，一律采用小寫加下劃線的方式
命名中盡量避免使用中文拼音，應(yīng)該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合
命名注意縮寫，但是不能盲目縮寫
不允許通過1、2、3等序號(hào)進(jìn)行命名
避免class與id重名
id注意用于標(biāo)識(shí)模塊或頁(yè)面的某一個(gè)父容器區(qū)域，名稱必須唯一，不要隨意新建id
class用于標(biāo)識(shí)某一個(gè)類型的對(duì)象，命名必須言簡(jiǎn)意賅
盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式
規(guī)則名稱中不應(yīng)該包含顏色、定位等與具體顯示效果相關(guān)的信息，應(yīng)該用意義命名，而不是結(jié)果名稱

四、書寫規(guī)范

4.1 排版規(guī)范

使用4tab來(lái)縮進(jìn)
規(guī)則可以寫成單行。或者多行，但是整個(gè)文件內(nèi)的規(guī)則排版必須統(tǒng)一

　　書寫風(fēng)格：

每一個(gè)屬性值必須添加分號(hào)
如果多個(gè)屬性公用一個(gè)樣式集，則多個(gè)屬性必須寫成多行形式

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的順序進(jìn)行添加，標(biāo)準(zhǔn)屬性寫在最后
鏈接的樣式請(qǐng)嚴(yán)格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active

4.3 代碼性能優(yōu)化

合并margin、padding、border的-top/-right/-bottom/-left的設(shè)置，盡量使用短名稱
選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡(jiǎn)短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置
禁止在css中使用*選擇符
0后面不需要多帶帶，比如0px可以省略成0，0.8px可以省略成.8px
如果可以顏色盡量用三位字符表示，比如#ccc
如果沒有邊框時(shí)，不要寫成border:0;應(yīng)該寫成border:none
在保存代碼解耦的前提下，盡量合并重復(fù)的樣式
background、font等可以縮寫的屬性，盡量使用縮寫形式
能以背景形式呈現(xiàn)的圖片，盡量都寫入CSS樣式中

4.4 CSS Hack的使用

　　盡量少使用瀏覽器檢測(cè)和CSS Hacks，先試試別的解決辦法。考慮到代碼高效率和易管理，雖然這兩種辦法能快速解決瀏覽器解析差異，但應(yīng)被視為最后的手段。在長(zhǎng)期的項(xiàng)目中，允許使用hack只會(huì)帶來(lái)更多的hack，所以盡量少用

IE6: _property:value
IE6/7: *property:value
IE6/7/8/9: property:value9

4.5 IE兼容性

　　IE支持通過特定的標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的IE版本，除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置edge mode，從而通知IE采用其所支持的最新的模式

　　注意：X-UA-Compatible這個(gè)是IE8的專用標(biāo)記，用來(lái)指定IE8瀏覽器去模擬某個(gè)特定版本的IE瀏覽器的渲染方式

　　　　中的chrome=1效果是如果安裝了GCF，則使用GCF來(lái)渲染頁(yè)面，如果未安裝GCF，則使用最高版本的IE內(nèi)核進(jìn)行渲染

4.6 字體規(guī)則

為了防止文件合并及編碼轉(zhuǎn)換時(shí)造成問題，建議將樣式中文字體名字改成對(duì)應(yīng)的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(Microsoft Yahei)
字體粗細(xì)采用具體數(shù)值，粗體bold寫成700，正常normal寫成400
font-size必須以px為單位
為了對(duì)font-family取值進(jìn)行統(tǒng)一，更好的支持各個(gè)操作系統(tǒng)上各個(gè)瀏覽器的兼容性，font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置

五、其他規(guī)范

不要輕易改動(dòng)全站級(jí)CSS和通用CSS庫(kù)，改動(dòng)后，要經(jīng)過全面測(cè)試
避免使用filter
避免在CSS中使用expression
避免過小的背景圖片平鋪
盡量不要在CSS中使用!important
絕對(duì)不要在CSS中使用"*"選擇符
層級(jí)(z-index)必須清晰明確，頁(yè)面彈窗、氣泡為最高級(jí)(最高級(jí)為999)，不同彈窗氣泡之間可在三位數(shù)之間調(diào)整，普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級(jí)上個(gè)位增加，禁止層級(jí)間盲目攀比
背景圖片在情況允許，盡可能使用sprite技術(shù)，減小http請(qǐng)求，考慮到多人協(xié)作開發(fā)，sprite按照模塊、業(yè)務(wù)、頁(yè)面來(lái)劃分
頁(yè)面內(nèi)部盡量避免使用style屬性，CSS放在head標(biāo)簽中，由link標(biāo)簽引入，使頁(yè)面的結(jié)構(gòu)與表現(xiàn)分離
盡量減少使用float、position等影響性能的屬性，這樣可以避免新手在布局時(shí)出現(xiàn)的混亂
盡量少使用
來(lái)斷行
不要連續(xù)出現(xiàn)多個(gè) (空格)，也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用text-indent、maring/padding等方法來(lái)實(shí)現(xiàn)
排版如果遇到需要首行縮進(jìn)的處理，可以使用text-indent:2em;
圖片如果需要加載就在頁(yè)面上用img標(biāo)簽寫出，并指明寬高，重要的圖片必須加上alt屬性，給重要的元素和截?cái)嗟脑厣霞由蟭itle
如果有跳轉(zhuǎn)的地方，統(tǒng)一使用a標(biāo)簽，，需要跳轉(zhuǎn)到新頁(yè)面，則還需要加上targent="_blank"屬性，如果點(diǎn)擊的是空鏈接(#)，則會(huì)自動(dòng)將當(dāng)前頁(yè)面重置到首端，可以使用"javascript:void()"來(lái)替代原來(lái)的"#"
分清楚什么情況下jpg/gif/png圖片

六、自適應(yīng)頁(yè)面布局（響應(yīng)式布局，暫不考慮低版本IE兼容性）

6.1 布局細(xì)節(jié)

首先頭部head中加入meta新標(biāo)簽

position：不能使用絕對(duì)定位
width/height/margin/padding: 不能使用px，應(yīng)該使用百分比、auto或em
font: 不能使用絕對(duì)大小，應(yīng)使用em

6.2 CSS3引入的Media Query模塊，可自動(dòng)探測(cè)屏幕寬度

加載相應(yīng)的CSS文件，建議根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則，如：@media screen and (max-width:799px) {...}
圖片自適應(yīng)：img{max-width:100%;}

七、幫助文檔

7.1 全局樣式寫法（reset css）

7.2 清浮動(dòng)

　　需要清除浮動(dòng)的地方有：

若子元素浮動(dòng)，而父元素內(nèi)容塌陷（也就是沒有包住）
布局出現(xiàn)混亂，譬如下一層的跑到上一層去了

　　解決辦法（四種方法）

給父元素同樣適用浮動(dòng)，保證子元素與父元素浮動(dòng)后還是在同一層
正確使用overflow:hidden;總所周知，overflow:hidden主要意思是溢出隱藏的意思，但是同樣有清浮動(dòng)的效果
在需要的元素下面添加
，CSS中：clear{clear:both;}（不推薦，增加代碼，冗余）
使用clearfix來(lái)清除浮動(dòng)（推薦），相當(dāng)于創(chuàng)建一個(gè)隱形的內(nèi)容為空的塊的目標(biāo)元素來(lái)清除浮動(dòng)

　　　　.clearfix{*zoom:1;} /* 針對(duì)IE7 hack，觸發(fā)IE7的haslayout，以清除浮動(dòng) */
　　　　.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
　　　　.clearfix:after{clear:both;}

7.3 各大網(wǎng)站的字體樣式：

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,5b8b4f53,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;