前端代碼風格規範總結

時間 2019-11-06

標籤前端代碼風格規範總結简体版

原文原文鏈接

本文轉載於:猿2048網站➞前端代碼風格規範總結javascript

規範目的：爲了提升工做效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構。php

規範基本準則：符合web標準，使用具備語義的標籤，使結構、表現、行爲分離，兼容性優良。頁面性能優化，代碼簡潔、明瞭、有序，儘量的減小服務器的負載，保證最快的解析速度。css

1、文件規範html

1.1 HTML部分前端

　　1.1.1 建包問題java

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

　　　　注意：全部的css文件放在css文件夾中，image放在images文件夾中，js放在js文件夾中chrome

　　1.1.2 HTML頭部編寫express

　　　　(1) 編碼：全部編碼均採用xhtml/html，標籤必須閉合，編碼統一爲UTF-8，在多語言的網站建議添加<html lang="zh-CN">，說明內容是以中文顯示和閱讀爲基礎的瀏覽器

　　　　(2) 語義化：正確使用標籤，充分利用無兼容性問題的html自身標籤

　　　　(3) 文件頭部head內容：

　　　　　　• title: 須要添加標題

　　　　　　• 編碼: charset=UTF-8

　　　　　　• meta: 能夠添加description、keywords內容

1.2 CSS部分

　　1.2.1 CSS種類及其命名

　　　　能夠將CSS樣式表分爲三類：全局樣式表、模塊通用樣式表和獨立樣式表

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

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

　　　　　　• 獨立樣式表：模塊名_頁面名.css

　　1.2.2 CSS引入

　　　　CSS文件引入可經過外聯或者內聯方式引入

　　• 外聯方式

　　• 內聯方式

　　　　注意：link和style標籤都應該放入head中，原則上，不容許在html上直接寫樣式。避免在CSS中使用@import，嵌套不要超過一層。

2、註釋規範

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    默認寬度爲1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

　　注意：

　　　　• 每個文檔對應一個文檔註釋（主要註釋內容包括：文檔建立人、建立時間、主要內容描述等）

　　　　• 屬性註釋說明：能夠分CSS屬性來進行命名（如：margin/padding值、CSS Hack、全局Hover等）

　　　　• 功能模塊註釋說明：分模塊來編寫CSS樣式（如：頭部、導航、按鈕、頁腳等等）

3、命名規範

3.1 如何命名

　　• css最好用class來命名，js用id來命名，已作區分

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

3.2 命名示例

.div1{} /* 不推薦；無心義 */
.a_green{} /* 不推薦；無心義 */
.menu{} /* 推薦；特殊性*/
.header{} /* 推薦；通用性*/

3.3 命名精簡

　　id和class命名越精簡越好，只要足夠表達意思，這樣有助於理解，同時也能提升代碼效率

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

3.4 命名嵌套問題

　　書寫css要注意前後順序和嵌套問題，從性能上考慮儘可能減小選擇器的層級

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

3.5 注意事項

規則命名中，一概採用小寫加下劃線的方式
命名中儘可能避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合
命名注意縮寫，可是不能盲目縮寫
不容許經過一、二、3等序號進行命名
避免class與id重名
id注意用於標識模塊或頁面的某一個父容器區域，名稱必須惟一，不要隨意新建id
class用於標識某一個類型的對象，命名必須言簡意賅
儘量提升代碼模塊的複用，樣式儘可能用組合的方式
規則名稱中不該該包含顏色、定位等與具體顯示效果相關的信息，應該用意義命名，而不是結果名稱

4、書寫規範

4.1 排版規範

使用4tab來縮進
規則能夠寫成單行。或者多行，可是整個文件內的規則排版必須統一

　　書寫風格：

每個屬性值必須添加分號
若是多個屬性公用一個樣式集，則多個屬性必須寫成多行形式

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的順序進行添加，標準屬性寫在最後
連接的樣式請嚴格按照以下順序添加：a:link -> a:visited -> a:hover -> a:active

4.3 代碼性能優化

合併margin、padding、border的-top/-right/-bottom/-left的設置，儘可能使用短名稱
選擇器應該在知足功能的基礎上儘可能簡短，減小選擇器嵌套，查詢消耗。可是必定要避免覆蓋全局樣式設置
禁止在css中使用*選擇符
0後面不須要單獨，好比0px能夠省略成0，0.8px能夠省略成.8px
若是能夠顏色儘可能用三位字符表示，好比#ccc
若是沒有邊框時，不要寫成border:0;應該寫成border:none
在保存代碼解耦的前提下，儘可能合併重複的樣式
background、font等能夠縮寫的屬性，儘可能使用縮寫形式
能以背景形式呈現的圖片，儘可能都寫入CSS樣式中

4.4 CSS Hack的使用

　　儘可能少使用瀏覽器檢測和CSS Hacks，先試試別的解決辦法。考慮到代碼高效率和易管理，雖然這兩種辦法能快速解決瀏覽器解析差別，但應被視爲最後的手段。在長期的項目中，容許使用hack只會帶來更多的hack，因此儘可能少用

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

4.5 IE兼容性

　　IE支持經過特定的<meta>標籤來肯定繪製當前頁面所應該採用的IE版本，除非有強烈的特殊需求，不然最好是設置edge mode，從而通知IE採用其所支持的最新的模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　注意：X-UA-Compatible這個是IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式

　　　　 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">中的chrome=1效果是若是安裝了GCF，則使用GCF來渲染頁面，若是未安裝GCF，則使用最高版本的IE內核進行渲染

4.6 字體規則

爲了防止文件合併及編碼轉換時形成問題，建議將樣式中文字體名字改爲對應的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(Microsoft Yahei)
字體粗細採用具體數值，粗體bold寫成700，正常normal寫成400
font-size必須以px爲單位
爲了對font-family取值進行統一，更好的支持各個操做系統上各個瀏覽器的兼容性，font-family不容許在業務代碼中隨意設置

5、其餘規範

不要輕易改動全站級CSS和通用CSS庫，改動後，要通過全面測試
避免使用filter
避免在CSS中使用expression
避免太小的背景圖片平鋪
儘可能不要在CSS中使用!important
絕對不要在CSS中使用"*"選擇符
層級(z-index)必須清晰明確，頁面彈窗、氣泡爲最高級(最高級爲999)，不一樣彈窗氣泡之間可在三位數之間調整，普通區塊爲10-90內10的倍數；區塊展開、彈出爲當前父層級上個位增長，禁止層級間盲目攀比
背景圖片在狀況容許，儘量使用sprite技術，減少http請求，考慮到多人協做開發，sprite按照模塊、業務、頁面來劃分
頁面內部儘可能避免使用style屬性，CSS放在head標籤中，由link標籤引入，使頁面的結構與表現分離
儘可能減小使用float、position等影響性能的屬性，這樣能夠避免新手在佈局時出現的混亂
儘可能少使用<br />來斷行
不要連續出現多個 (空格)，也儘可能少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該儘可能使用text-indent、maring/padding等方法來實現
排版若是遇到須要首行縮進的處理，可使用text-indent:2em;
圖片若是須要加載就在頁面上用img標籤寫出，並指明寬高，重要的圖片必須加上alt屬性，給重要的元素和截斷的元素上加上title
若是有跳轉的地方，統一使用a標籤，<a href="#"></a>，須要跳轉到新頁面，則還須要加上targent="_blank"屬性，若是點擊的是空連接(#)，則會自動將當前頁面重置到首端，可使用"javascript:void()"來替代原來的"#"
分清楚什麼狀況下jpg/gif/png圖片

6、自適應頁面佈局（響應式佈局，暫不考慮低版本IE兼容性）

6.1 佈局細節

首先頭部head中加入meta新標籤

<meta name="viewport" content="width=device-width, initial-scale=1">

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

6.2 CSS3引入的Media Query模塊，可自動探測屏幕寬度

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

7、幫助文檔

7.1 全局樣式寫法（reset css）

7.2 清浮動

　　須要清除浮動的地方有：

若子元素浮動，而父元素內容塌陷（也就是沒有包住）
佈局出現混亂，譬以下一層的跑到上一層去了

　　解決辦法（四種方法）

給父元素一樣適用浮動，保證子元素與父元素浮動後仍是在同一層
正確使用overflow:hidden;總所周知，overflow:hidden主要意思是溢出隱藏的意思，可是一樣有清浮動的效果
在須要的元素下面添加<div class="clear"></div>，CSS中：clear{clear:both;}（不推薦，增長代碼，冗餘）
使用clearfix來清除浮動（推薦），至關於建立一個隱形的內容爲空的塊的目標元素來清除浮動

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

7.3 各大網站的字體樣式：

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',\5b8b\4f53,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;