WEB前端开发规范文档示例

一、规范目的 

  为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。本规范文档一经确认， 前端开发人员必须按本文档规范进行前台页面开发，本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。

在规范的框框下，我们就可以一心一意写代码了，不用太担心后期维护问题，及代码风格问题了。

二、基本准则 

1、符合web标准, 语义化html,遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的 代码组织模式；

2、代码格式化，保持干净整洁；

3、html 换行时必须缩进一个tab；

4、编写所有前台页面时，应尽量遵循相同的页面代码结构；

5、每一个页面都必须有一个独立的css，js文件（base.css 或 base.js 类似这样的文件除外）；

6、如果不是用HTML5编写的网站，请用IE7，IE8，IE9，火狐， 谷歌，webkit，safari内核进行测试兼容性；

7、如果是HTML5编写的网站，请用IE9，火狐，谷歌，webkit， safari内核进行测试兼容性。 

三、文件规范 

 1、html, css, js, images文件均归档至《系统开发规范》约定的目录中；

 2、html文件命名，英文命名，后缀.htm，同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面；

 3、css文件命名，英文命名，后缀.css，共用base.css, 首页index.css, 其他页面依实际模块需求命名； 

 4、Js文件命名，英文命名，后缀.js，共用common.js, 其他依实际模块需求命名。

四、HTML书写规范

1、所有元素都必须小写，属性也是，如： 

   正确 

   错误 ；

2、元素必须成对出现，如必须写成特殊元素除外，

   如： 

3、标签中不允许出现样式，必须用class来声明样式，如： 

   错误

    正确 

4、属性id命名必须是驼峰式命名如： 

   正确

   错误 

   错误

 5、属性class命名规范是： 元素简写+“-”+功能名，如：

   正确

   错误 

   错误 

6、属性name命名必须遵循驼峰式命名法。

    正确

   错误

   错误 

7、属性必须有值： 

   正确 

8、属性值必须用双引号，不允许使用单引号。 

   正确 

   错误 

1. 如果元素需要自定义属性，请用data-xxx方式命名。
2. 严禁使用已在XHTML1.0中已移除的标签，如： s，i，b，font等

五、HTML其他规范 

1、文档类型声明及编码，统一为html5声明类型

   编码统一为，书写时利用IDE实现层次分明的缩进；

2、非特殊情况下样式文件必须外链至与之间

    非特殊情况下JavaScript文件必须外链至页面底部，之前；

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嵌套，如欢迎访问XXX, 您的用户名

   是用户名

完全可以用以下代码

   替代: 

欢迎访问XXX, 您的用户名是用户名

；

9、书写链接地址时， 必须避免重定向，例如：href="http://105la.com/", 即须在URL地址

   后面加上“/”； 

10、在页面中尽量避免使用style属性,即style=""；

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

    

姓名: 

 须写成: 

    

姓名: 

  

12、能以背景形式呈现的图片，尽量写入css样式中；

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

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

15、特殊符号使用， 尽可能使用代码替代， 比如<(<) &>(>) &空格( ) & »(») 等等；

16、书写页面过程中, 请考虑向后扩展性。

六、CSS书写规范 

1、元素尽量使用class选择器匹配，对于特殊功能可以考虑使用 ID选择器；

2、明确各选择器的优先级，作用范围；

3、CSS写完之后必须使用“;”号结尾，虽然浏览器支持不用分号结尾，但是不建议这么做；

4、除非编写HTML5页面，否则不允许使用CSS3伪类，如  :nth-child(1) 等伪类，禁止使用；

5、编写CSS样式时，不允许换行，样式必须一行写完，自动换行 除外；

6、对于子元素样式采用链选择器进行选择，如 :btn-save div ；

7、元素选择器只能在定义全局CSS和子元素匹配时使用（尽量少 用），其他地方禁止使用；

8、请记住IE浏览器的hack方式，如下

   IE6 = _width:100px;  IE7 = *width:100px;  IE8 = width:100px\9; 

   IE8/9 = width:100px\0;  IE9 = width:100px\9\0；

9、编码统一为UTF-8；

10、css属性书写顺序,，建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性，

    此条可根据自身习惯书写，但尽量保证同类属性写在一起；

11、书写代码前，考虑并提高样式重复使用率；

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

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

，样式

ul:list li{position:relative}  ul:list li span{position:absolute; right:0} 可居右显示；

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

14、使用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文件中我会初始化表格样式；

15、杜绝使用兼容 ie8；

16、避免存在兼容性属性的使用，比如text-shadow 或者 css3的相关属性；

17、减少使用影响性能的属性，比如position:absolute 或者 float  ；

18、必须为大区块样式添加注释, 小区块适量注释；

七、JavaScript书写规范 

1、JS必须使用外部文件方式加载；

2、JS引入代码必须集中放置在页面最底部之前，

   严禁在之间引入JS，特殊情况除外；

3、JS变量命名请使用驼峰式命名法；

4、JS变量严禁使用“不明觉厉”的命名方法，如： vara;var b；

5、每一个函数与事件监听都必须有注释，声明其作用，

   如果代码过长，那么请对一个功能模块进行注释；

6、JS函数命名必须使用驼峰式命名；

7、JS函数严禁使用“不明觉厉”的命名方法，如： function a(){}；

8、JS代码换行时，必须使用缩进。

八、jQuery部分 

1、使用jQuery选择器如果是唯一的，请使用ID选择器； 

2、使用class选择器时，在class前加上标签名，如： 

   $(“div.class”)正确 ，$(“.class”)错误 ；

3、尽量使用ID选择器代替class选择器；

4、如果一个变量存放的是jQuery对象的话，那么请用”$”符号 开头，

   声明这是一个jQuery对象；

5、避免使用live()函数绑定事件，可以使用bind()和on()代替，例如

   $(document).on(“click” ,”#id”,function(){})；

6、把可能会影响页面加载速度的代码绑定到 $(window).load()事件中，

   如动画，视觉特效等代码。

九、图片规范 

1、所有页面元素类图片均放入images文件夹，测试用图片放于images/demoimg文件夹；

2、图片格式仅限于gif 或 png 或 jpg；

3、命名全部用小写英文字母 ||  数字 ||  _ 的组合，

   其中不得包含汉字 || 空格 || 特殊字符，尽量用易懂的词汇，便于团队其他成员理解。

   另， 命名分头尾两部分，用下划线隔开，比如ad_left01.gif || btn_submit.gif；

4、在保证视觉效果的情况下选择最小的图片格式与图片质量， 以减少加载时间；

5、尽量避免使用半透明的png图片(若使用， 请参考css规范相关说明)。

十、注释规范 

1、html注释格式, '--'只能在注释的始末位置，不可置入注释文字区域；

2、css注释格式 /**这儿是注释**/；

3、JavaScript单行注释用 //这儿是单行注释，多行注释用 /** 这儿有多行注释 **/。  

十一、开发及测试工具约定 

建议使用Aptana || Dw || Vim || HBuilder ，亦可根据自己喜好选择, 但须遵循如下原则。

1、不可利用IDE的视图模式'画'代码；

2、不可利用IDE生成相关功能代码，比如Dw内置的一些功能js；

3、编码必须格式化，比如缩进。

建议测试顺序FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari

前期开发仅测试FireFox & IE6 & IE7 & IE8 

后期优化时加入Opera & Chrome & Safari; IE Tab Plus插件

十二、其他规范 

1、开发过程中严格按分工完成页面， 以提高css复用率，避免重复开发；

2、减小沉冗代码, 书写所有人都可以看的懂的代码；

3、严禁修改任何第三方插件的核心文件。