web前端中的命名規則
規範目的
為提高團隊協作效率， 便於後臺人員新增功能及前端後期最佳化維護， 輸出高質量的文件， 特制訂此文件。 本規範文件一經確認，
前端開發人員必須按本文件規範進行前臺頁面開發。 本文件如有不對或者不合適的地方請及時提出， 經討論決定後方可更改。
基本準則
符合web標準， 語義化html， 結構表現行為分離， 相容性優良。 頁面效能方面， 程式碼要求簡潔明瞭有序， 儘可能的減小伺服器負載， 保證最快的解析速度。
檔案規範
1。 html， css， js， images檔案均歸檔至<系統開發規範>約定的目錄中；
2。 html檔案命名： 英文命名， 字尾。htm。 同時將對應介面稿放於同目錄中， 若介面稿命名為中文， 請重新命名與html檔案同名， 以方便後端新增功能時查詢對應頁面；
3。 css檔案命名： 英文命名， 字尾。css。 共用base。css， 首頁index。css，
其他頁面依實際模組需求命名。；
4。 Js檔案命名： 英文命名， 字尾。js。 共用common。js， 其他依實際模組需求命名。
html書寫規範
1。 文件型別宣告及編碼： 統一為html5宣告型別<！DOCTYPE html>； 編碼統一為 charset=“gbk” />， 書寫時利用IDE實現層次分明的縮排； 2。 非特殊情況下樣式檔案必須外鏈至
3。 引入樣式檔案或JavaScript檔案時， 須略去預設型別宣告， 寫法如下：
/>
4。 引入JS庫檔案， 檔名須包含庫名稱及版本號及是否為壓縮版， 比如jquery-1。4。1。min。js； 引入外掛， 檔名格式為庫名稱+外掛名稱， 比如jQuery。cookie。js；
5。 所有編碼均遵循xhtml標準， 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成， 且所有標籤必須閉合， 包括 br
（
）， hr（
）等； 屬性值必須用雙引號包括；
6。 充分利用無相容性問題的html自身標籤， 比如span， em， strong， optgroup， label，等等； 需要為html元素新增自定義屬性的時候， 首先要考慮下有沒有預設的已有的合適標籤去設定， 如果沒有， 可以使用須以“data-”為字首來新增自定義屬性，避免使用“data：”等其他命名方式；
7。 語義化html， 如 標題根據重要性用h*（同一頁面只能有一個h1）， 段落標記用p， 列表用ul， 內聯元素中不可巢狀塊級元素；
8。 儘可能減少div巢狀， 如
class=“welcome”>歡迎訪問XXX， 您的使用者名稱是
歡迎訪問XXX， 您的使用者名稱是使用者名稱
9。 書寫連結地址時， 必須避免重定向，例如：href=“
http：//
itaolun。com/
”，
即須在URL地址後面加上“/”；
10。 在頁面中儘量避免使用style屬性，即style=“…”；
11。 必須為含有描述性表單元素（input， textarea）新增label，
如
姓名： type=“text” id=“name” name=“name” /> /> 12。 能以背景形式呈現的圖片， 儘量寫入css樣式中； 13。 重要圖片必須加上alt屬性； 給重要的元素和截斷的元素加上title； 14。 給區塊程式碼及重要功能（比如迴圈）加上註釋， 方便後臺新增功能； 15。 特殊符號使用： 儘可能使用程式碼替代： 比如 <（<） & >（>；） & 空格（ ） & »（»） 等等； 16。 書寫頁面過程中， 請考慮向後擴充套件性； 17。 class & id 參見 css書寫規範。 css書寫規範 1。 編碼統一為utf-8； 2。 協作開發及分工： i會根據各個模組， 同時根據頁面相似程式， 事先寫好大體框架檔案， 分配給前端人員實現內部結構&表現&行為； 共用css檔案base。css由i書寫， 協作開發過程中， 每個頁面請務必都要引入， 此檔案包含reset及頭部底部樣式， 此檔案不可隨意修改； 3。 class與id的使用： id是唯一的並是父級的， class是可以重複的並是子級的， 所以id僅使用在大的模組上， class可用在重複使用率高及子級中； id原則上都是由我分發框架檔案時命名的， 為JavaScript預留鉤子的除外； 4。 為JavaScript預留鉤子的命名， 請以 js_ 起始， 比如： js_hide， js_show； 5。 class與id命名： 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名。其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名， 如i_comment， fontred， width200； 避免使用中文拼音， 儘量使用簡易的單詞組合； 總之， 命名要語義化， 簡明化。 6。 規避class與id命名（此條重要， 若有不明白請及時與i溝通）： a） 透過從屬寫法規避， 示例見d； b）取父級元素id/class命名部分命名， 示例見d； c）重複使用率高的命名， 請以自己代號加下劃線起始， 比如i_clear； d）a，b兩條， 適用於在2中已建好框架的頁面， 如， 要在2中已建好框架的頁面程式碼 id=“mainnav”>
