關於html和CSS以及JavaScript前端命名規範的詳解-html教學-PHP中文網

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

無論是從技術角度或開發視角，對於web前端開發規範文檔都有一定規範，本文就css3和html5的發展前景總結了一系列的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宣告類型; 編碼統一為, 書寫時利用IDE實作層次分明的縮排;

2. 非特殊情況下樣式檔必須外鏈至…

之間;非特殊情況下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 (
), hr(

)等; 屬性值必須用雙引號包括;

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

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

8. 盡可能減少p嵌套, 如

歡迎訪問XXX, 您的用戶名是

用戶名

完全可以用以下代碼替代:

歡迎訪問XXX, 您的使用者名稱是使用者名稱

;

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. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等;

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中已建好框架的页面代码

中加入新的p元素,

按a命名法则:

…

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

按b命名法则:

…

样式写法: .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自身属性及样式继承原理减少代码量, 比如:

这儿是标题列表2010-09-15

定义

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. 杜绝使用兼容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库, 若需引入第三方库, 须与团队其他人员讨论决定;