關於html和CSS以及JavaScript前端命名規範的詳解

無意發現自己資料夾裡面有這麼一個文件，具體從哪裡來的不記得了，仔細看下，發現總結的挺好的，貼出來分享一下。

無論是從技術角度或開發視角，對於web前端開發規範文檔都有一定規範，本文就css3和html5的發展前景總結了一系列的web開發文檔，僅供大家參考。

規範目的：

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

基本準則：

#符合web標準, 語意化html, 結構表現行為分離, 相容性優良. 頁面效能面向, 程式碼要求簡潔明了有序, 盡可能的減少伺服器負載, 保證最快的解析速度.

檔案規格

1. html, css, js, images檔案皆歸檔至fc61d7bb16ead4a113802205af2114fb約定的目錄中;

2. html文件命名: 英文命名, 字尾.htm. 同時將對應介面稿放於同目錄中, 若介面稿命名為中文, 請重新命名與html檔案同名, 以方便後端新增功能時尋找對應頁;

3. css檔命名: 英文命名, 字尾.css. 共用base.css, 首頁index.css, 其他頁面依實際模組需求命名.;

#4. Js檔命名: 英文命名, 字尾.js. 共用common.js, 其他依實際模組需求命名.

html書寫規格

1. 文檔類型宣告及編碼: 統一為html5宣告類型8b05045a5be5764f313ed5b9168a17e6; 編碼統一為b6c06a3eac5ba315bbbfde6d7627c15a, 書寫時利用IDE實作層次分明的縮排;

2. 非特殊情況下樣式檔必須外鏈至93f0f5c25f18dab9d176bd4f6de5d30e…9c3bca370b5104690d9ef395f2c5f8d1之間;非特殊情況下JavaScript檔案必須外鏈至頁面底部;

3. 引入樣式檔案或JavaScript檔案時, 須略去預設類型宣告, 寫法如下:

<link rel=”stylesheet” href=”…” /> 
<style>…</style> 
<script src=”…”></script>

#4. 引入JS庫檔, 檔名必須包含庫名稱及版本號及是否為壓縮版, 例如jquery-1.4.1.min.js ; 引入外掛程式, 檔名格式為庫名稱+外掛名稱, 例如jQuery.cookie.js;

#5. 所有編碼皆遵循xhtml標準, 標籤& 屬性& 屬性命名必須由小寫字母及底線數字組成, 且所有標籤必須閉合, 包括br (df250b2156c434f3390392d09b1c9563), hr(231a563c997aa9e3e0ae614bd16728b0)等; 屬性值必須用雙引號包括;

#6. 充分利用無相容性問題的html自身標籤, 例如span, em, strong, optgroup, label,等等; 需要為html元素添加自訂屬性的時候, 首先要考慮下有沒有默認的已有的適當標籤去設定, 如果沒有, 可以使用須以”data-”為前綴來添加自訂屬性，避免使用”data:”等其他命名方式;

7. 語義化html, 如標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;

8. 盡可能減少p嵌套, 如aee08300b2632d3c41e1beb93089f98352f26fb90be40ecbd193e7d1c637d1da歡迎訪問XXX, 您的用戶名是94470406356e02bb01bd68f5c158027c用戶名94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3完全可以用以下代碼替代: aee08300b2632d3c41e1beb93089f983e388a4556c0f65e1904146cc1a846bee歡迎訪問XXX, 您的使用者名稱是45a2772a6b6107b401db3c9b82c049c2使用者名稱54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3;

9. 書寫連結地址時, 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址後面加上“/”；

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如

<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 23e65ded356aa426d214d9d9ddf28734(>) & 空格( ) & ?(?) 等等;

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中已建好框架的页面代码c48f9669ad11dcb912c034824b11399d94b3e26ee717c64999d7867364b1b4a3中加入新的p元素,

按a命名法则: c48f9669ad11dcb912c034824b11399d18b7ce3e5d699256d55a2ec3453b3846…94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3,

样式写法: #mainnav .firstnav{…….}

按b命名法则: c48f9669ad11dcb912c034824b11399dd87c8ec98d2f3b25b4de9f81496ce4d2…94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3,

样式写法: .main_firstnav{…….}

7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等；其他属性包括: list-style(列表样式) ＆ vertical-vlign ＆ cursor ＆ z-index(层叠顺序) ＆ zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

ce431427e58695622f8e7ff623fdbae125edfb22a4f469ecb59f1190150159c6这儿是标题列表45a2772a6b6107b401db3c9b82c049c22010-09-1554bdf357c58b8a65c66d7c19c8e4d114929d1f5ca49e04fdcb27f9465b944689

定义

ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如

thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: 
table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} ,

base.css文件中我会初始化表格样式)

13. 杜绝使用54b3dbf4873c98ff5f3255df674c261f 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

 

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小寫英文字母|| 數字|| _ 的組合，其中不得包含漢字|| 空格|| 特殊字符；盡量用易懂的詞彙, 便於團隊其他成員理解; 另,命名分頭尾兩部分, 用底線隔開, 例如下劃線分隔, 例如 || btn_submit.gif;

4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少載入時間;

5. 盡量避免使用半透明的png圖片(若使用, 請參考css規範相關說明);

6. 運用css sprite技術集中小的背景圖或圖示, 減少頁面http請求, 但注意, 請務必在對應的sprite psd來源圖中劃參考線, 並儲存至img目錄下.

 

註解規格

1. html註解: 註解格式a271f5366b6b6b4315fc164f566d1f1a, '–'只能在註解的始末位置,不可置入註解文字區;

#2. css註解: 註解格式/*這兒是註釋*/;

3. JavaScript註解, 單行註解使用'//這兒是單行註解' ,多行註解使用/* 這兒有多行註解*/;

 

開發及測試工具約定

建議使用Aptana || Dw | | Vim , 也可依自己喜好選擇, 但須遵循如下原則:

#1. 不可利用IDE的視圖模式'畫'代碼;

2. 無法利用IDE產生相關功能代碼, 例如Dw內建的一些功能js;

#3. 編碼必須格式化, 例如縮排;

測試工具: 前期開發僅測試FireFox & IE6 & IE7 & IE8 , 後期優化時加入Opera & Chrome & Safari;

## 建議測試順序: FireFox–> ;IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建議安裝firebug及IE Tab Plus外掛程式.

其他規格

#1. 開發過程中嚴格按分工完成頁面, 以提高css復用率, 避免重複開發;

2. 減小沈冗餘程式碼,書寫所有人都可以看的懂的代碼. 簡潔易懂是一種美德. 為用戶著想, 為伺服器著想.

以上是關於html和CSS以及JavaScript前端命名規範的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！