WEB前端開發規範文檔+CSS命名規範

時間 2019-11-19

標籤 web 前端開發規範文檔 css 命名欄目 HTML 简体版

原文原文鏈接

來源於https://www.jb51.net/books/496860.html

WEB前端開發規範文檔+CSS命名規範css

規範目的
　　爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔若有不對或者不合適的地方請及時提出, 經討論決定後方可更改.

基本準則
　　符合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>; 編碼統一爲<meta charset="gbk" />, 書寫時利用IDE實現層次分明的縮進;
　　2. 非特殊狀況下樣式文件必須外鏈至<head>...</head>之間;非特殊狀況下JavaScript文件必須外鏈至頁面底部;
　　3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明, 寫法以下:html

Example Source Code [www.52css.com]前端

　　4. 引入JS庫文件, 文件名須包含庫名稱及版本號及是否爲壓縮版, 好比jquery-1.4.1.min.js; 引入插件, 文件名格式爲庫名稱+插件名稱, 比如jQuery.cookie.js;
　　5. 全部編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名必須由小寫字母及下劃線數字組成, 且全部標籤必須閉合, 包括 br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括;
　　6. 充分利用無兼容性問題的html自身標籤, 好比span, em, strong, optgroup, label,等等; 須要爲html元素添加自定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標籤去設置, 若是沒有, 可使用須以"data-"爲前綴來添加自定義屬性，避免使用"data:"等其餘命名方式;
　　7. 語義化html, 如標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;
　　8. 儘量減小div嵌套, 如<div class="box"><div class="welcome">歡迎訪問XXX, 您的用戶名是<div class="name">用戶名</div></div></div>徹底能夠用如下代碼替代: <div class="box"><p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p></div>;
　　9. 書寫連接地址時, 必須避免重定向，例如：href="http://itaolun.com/", 即須在URL地址後面加上「/」；
　　10. 在頁面中儘可能避免使用style屬性,即style="…";
　　11. 必須爲含有描述性表單元素(input, textarea)添加label, 如jquery

Example Source Code [www.52css.com]css3

<p>姓名: <input type="text" id="name" name="name" /></p>
須寫成:
<p><label for="name">姓名: </label><input type="text" id="name" /></p>web

　　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中已建好框架的頁面, 如, 後端

Example Source Code [www.52css.com]服務器

要在2中已建好框架的頁面代碼<div id="mainnav"></div>中加入新的div元素,
按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,
樣式寫法: #mainnav .firstnav{.......}
按b命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>,
樣式寫法: .main_firstnav{.......}cookie

　　7. css屬性書寫順序, 建議遵循: 佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒.