前端代碼規範

時間 2019-11-24

標籤前端代碼規範简体版

原文原文鏈接

規範目的

提升工做效率，便於後期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個良好的前端架構。css

規範基本準則

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

1、文件規範

1.1 建包問題

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

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

1.2 HTML部分

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

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

1.3 CSS部分

1.3.1 CSS種類及其命名性能優化

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

全局樣式表經常使用命名：public.css
模塊通用樣式表命名：模塊名_basic.css
獨立樣式表：模塊名_頁面名.css

1.3.2 CSS引入服務器

CSS文件引入可經過外聯或者內聯方式引入
注意：link和style標籤都應該放入head中，原則上，不容許在html上直接寫樣式。避免在CSS中使用@import，嵌套不要超過一層。架構

1.4 js部分

HTML中引入js放在</body>以前
經過 JavaScript 生成的標籤讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免。

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--------------------*
複製代碼

注意：ide

每個文檔對應一個文檔註釋（主要註釋內容包括：文檔建立人、建立時間、主要內容描述等）
屬性註釋說明：能夠分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.3 代碼性能優化

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

5、其餘規範

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

6、幫助文檔

6.1 全局樣式寫法（以reset.css爲文件名）

/* 清除內外邊距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表單元素 */
th, td {
  /* table elements 表格元素 */
  margin: 0;
  padding: 0;
}

/* 設置默認字體 */
body,
button,
input,
select,
textarea {
  /* for ie */
  /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
  font: 12px/1 Tahoma, Helvetica, Arial, '\5b8b\4f53', sans-serif; /* 用 ascii 字符表示，使得在任何編碼下都無問題 */
}

h1 {
  font-size: 18px; /* 18px / 12px = 1.5 */
}
h2 {
  font-size: 16px;
}
h3 {
  font-size: 14px;
}
h4,
h5,
h6 {
  font-size: 100%;
}

address,
cite,
dfn,
em,
var {
  font-style: normal;
} /* 將斜體扶正 */
code,
kbd,
pre,
samp,
tt {
  font-family: 'Courier New', Courier, monospace;
} /* 統一等寬字體 */
small {
  font-size: 12px;
} /* 小於 12px 的中文很難閱讀，讓 small 正常化 */

/* 重置列表元素 */
ul,
ol {
  list-style: none;
}

/* 重置文本格式元素 */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

abbr[title],
acronym[title] {
  /* 注：1.ie6 不支持 abbr; 2.這裏用了屬性選擇符，ie6 下無效果 */
  border-bottom: 1px dotted;
  cursor: help;
}

q:before,
q:after {
  content: '';
}

/* 重置表單元素 */
legend {
  color: #000;
} /* for ie6 */
fieldset,
img {
  border: none;
} /* img 搭車：讓連接裏的 img 無邊框 */
/* 注：optgroup 沒法扶正 */
button,
input,
select,
textarea {
  font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
}

/* 重置表格元素 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 重置 hr */
hr {
  border: none;
  height: 1px;
}

複製代碼