一、前端開發規範目的
爲提高團隊協作效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，同時爲網站有一個更好的前端架構及網站的發展及未來打好一個基礎。
二、基本準則
符合web標準, 語義化html, 結構、表現、行爲分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小服務器負載, 保證最快的解析速度.
三、文件規範
1. html, css, js, p_w_picpath文件均歸檔至約定的目錄中;
2. html文件命名: 英文命名, 後綴.html 同時將對應界面稿放於同目錄中, 若界面稿命名爲中文, 請重命名與html文件同名, 以方便後端添加 功能時查找對應頁面;
3. css文件命名: 英文命名, 後綴.css. 共用base.css,其它根據模塊或頁面內容命名
4. Js文件命名: 英文命名, 後綴.js. 共用common.js, 其他依實際模塊需求命名.
四、html書寫規範
1. 文檔類型聲明及編碼: 如支持html5統一爲html5聲明類型<!DOCTYPE html>;如不支持html5統一爲html4.01過渡版聲明類型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">; mate屬性統一爲<meta http-equiv="Content-Type" content="text/html;charset=utf-8">,編碼統一爲utf-8, 書寫時利用IDE實現層次分明的縮進,比如dreamweave裏代碼格式化命令, 代碼縮進使用TAB鍵,儘量別使用空格
2. css和js文件外鏈至...之間, css文件要放在js文件上面, js可根據需求放在尾部
3. 引入樣式文件或JavaScript文件時,(html5下的規則)須略去默認類型聲明, 寫法如下:
<link rel="stylesheet" href="…" /><style>…</style><script src="…"></script>4. 引入JS庫文件, 文件名須包含庫名稱及版本號及是否爲壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式爲庫名稱+插件名稱, 比如jQuery.cookie.js;
5. 所有編碼均遵循xhtml標準, 標籤和屬性都用小寫字母, 且所有標籤必須閉合, 包括br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括; 如,height=80,應該寫爲height=”80”
6. <body>內的模塊要加上註釋,比如<!—content--><!—left sidebar-->等
7
.註釋規範. html註釋使用<!--這裏是內容(這裏面不允許再出現”-”)-->
8.語義化html, 如 標題根據重要性用h系列標題標籤, h1-h6的定義應遵循從大到小的原則, 體現文檔結構的同時也有利於搜索引擎的查詢 (同一頁面只能有一個h1,LOGO是一個站點的標誌,頁面中最重要的地方,所以把它分配給LOGO) , h標籤不可段層; 段落標記用p, 列表用ul,ol等,內聯元素中不可嵌套塊級元素;
遵循表現和結構相分離的原則,代碼中不涉及任何表現元素, 如<center> <font>標籤等
9.能以背景形式呈現的圖片, 儘量寫入css樣式中; 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title
10. 儘可能減少div嵌套, 原則上div嵌套不超出兩層, 如
<div class="box"><div class="welcome">歡迎訪問XXX, 您的用戶名是<div class="name">用戶名</div></div></div>完全可以用以下代碼替代:<div class="box">
<p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p></div>
11. 特殊符號應使用轉意符,比如 <(<) & >(>)& 空格( )等;
12. 必須爲含有描述性表單元素(input,textarea)添加label,如
<p>姓名: <input type=”text” id=”name” name=”name” /></p>
須寫成:<p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p>
13.關注標籤語義化
五、css編碼規範
1. 基本書寫規範:
1)編碼統一爲utf-8
2) 儘量不縮寫, 除非一眼就能看明白的單詞
3) 用英文和減號組合命名類(如：solution-title),用下劃線分隔法或者駝峯式命名法二者選其一命名ID（如：mian_menu_nav mainMenuNav 個人更偏向下劃線書寫方便） 不允許用拼音和數字; 命名時應根據模塊內容命名
4) css全部採用小寫,每項定義寫成一行, 屬性的冒號後面要加空格, 每項定義後面要加分號; 如
.box{
width: 150px;
}
5) 所有裝飾性的背景圖片都要寫css中, 背景圖片使用css sprite
6) 減少使用影響性能的屬性, 比如position:absolute || float ; 不允許在css中使用濾鏡表達式, 也儘量少用圖片repeat, 尤其在body當中,渲染性能極差, 如果需要用repeat的話, 圖片的寬或高不能少於8px
7) 請注意採用css 縮寫, 簡少代碼大小, 提高下載速度, 同時使代碼簡潔可讀. 如
.box{
border-color: #fff;
border-width: 1px;
border-style: solid;
}
可以寫爲一句:
.box{
border: 1px solid #fff;
}
8) css屬性書寫順序, 建議遵循以下順序
影響文檔流的屬性–>自身盒模型屬性–>排版相關屬性–>裝飾屬性–>生成內容屬性.
位置屬性–>大小–>文字系列–>背景–>其他.
此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起.
屬性列舉:
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等）
5. 生成內容的屬性（比如：content, list-style, quotes等）
以上所列出的這些屬性只是最常用到的, 並不代表全部
9) 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
<ul class=”list”>
<li>這兒是標題列表<span>2010-09-15</span></li>
</ul>
css定義
ul.list li{
position: relative;
}
ul.list li span{
position: absolute;
right: 0
}
10)注意權值:標籤權值：0.0.0.1;類權值：0.0.1.0;屬性權值：0.0.1.1;ID權值：0.1.0.0;important權值:1.0.0.0
11) 必須爲大區塊樣式添加註釋, 小區塊適量註釋; 註釋使用 /*註釋內容*/
12)書寫代碼前, 考慮並提高樣式重複使用率
2. 命名規則:
命名應以體現結構或內容爲原則.css命名以小寫英文字母和減號組合,避免使用數字,要以字母開頭. 以下列出常見的基本命名，這個可以根據個人習慣，但是請保證命名符合內容
[ 模塊前綴 ] - 類型 - ( 作用 | 狀態 ) n - [ 位置 n ]
圖例說明：
// ( 必選 )：必需存在。
// [ 可選 ]：可根據需要選擇。
// |：多選一。
// n：可有多個。
名詞說明：
模塊前綴 模塊定義時使用的前綴。
類型 定義類的內容類型。如輸入框、文本、段落等等。
作用 定義類的作用，用於對類型的補充。
狀態 定義類的狀態，用於對類型的補充。
位置 定義類所使用的位置，如首頁、導航等等，不排除使用左、右這樣的詞，但應儘量避免。
* 每項都可有自己的一個縮寫表，同一名稱的縮寫儘量統一。
* 所選用的單詞應選擇不過於具體表示某一狀態（如顏色、大小等）的單詞，以避免當狀態改變時名稱失去意義。
* 由不以數字開頭的小寫字母（a-z）、數字（0-9）組成。
* 確保類(.class)的重用性與對象(#id)的唯一性，id避免使用保留字。
頁面佈局：
-頁面頭部：header
-圖標：logo
-右上快捷區域：quick-links
-頁面中部：main
-側欄：side
-主欄：content
-區塊：section
-區塊頂部：box-top
-區塊中部：container
-區塊底部：box-bottom
-頁面底部：foot
-版權說明：copyright
模塊前綴：
* 彈出 pop
* 公共 global,gb
* 標題 title,tit
* 提示 hint
* 菜單 menu
* 信息 info
* 預覽 pvw
* Tips tips
* 導航 nav
類型：
* 按鈕 bt
* 文本 tx
* 段落 p
* 圖標 icon
* input input
* 顏色 color,c
* 背景 bg
* 邊框 bor
作用：
* 設置 set
* 添加 add
* 刪除 del
* 操作 op
* 密碼 pw
狀態：
* 成功 suc
* 失敗 lost
* 透明 tran
位置：
* 公共 gb
* 邊框 bor
* 段落 p
* 彈出 pop
* 標題 title,tit
* 菜單 menu
* 內容 cont
* 導航 nav
六、圖片規範
1. 圖片格式僅限於gif || png || jpg
背景圖儘量使用png-8的格式(IE6下支持其圖片透明度),對於圖片質量要求高的背景圖片,使用png-24(IE6下不支持其透明度). 基本原則就是在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間;
2. 圖片命名根據圖片用途使用小寫字母和下劃線組合, 如send_btn.png等,方便其它成員理解.
3. 運用css sprite技術集中小的背景圖或圖標,減小頁面http請求(注意圖片大小最好能不超過200K).
<link 前端學習、視頻教程、學習路線，添加威信 kaixin666haoyun ></script>