WEB前端开发规范文档示例- 校招VIP

转载声明：文章来源：https://blog.csdn.net/bocai99/article/details/122129354

一、规范目的

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

出，经讨论决定后方可更改。

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

二、基本准则

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、所有元素都必须小写，属性也是，如：

<input type=”text” id=”idName” />正确

<INPUT TYPE=”text” ID=”idName” />错误；

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

如：<br /><hr /><img /><input />

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

<input type=”text” id=”idName” style=”text-align:right;” />错误

<input type=”text” id=”idName” class=”class-name” />正确

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

<input type=”text” id=”idName” />正确

<input type=”text” id=”idname” />错误

<input type=”text” id=”id-name” />错误

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

<button calss=”btn-save”></button>正确

<button calss=”btnSave”></button>错误

<button calss=”save”></button>错误

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

<input type=”text” name=”idName” />正确

<input type=”text” name=”idname” />错误

<input type=”text” name=”id-name” />错误

7、属性必须有值：

<input type=”checkbox” checked=”checked” />正确

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

<input type=”checkbox” checked=”checked” />正确

<input type=’checkbox’ checked=’checked’ />错误

1.如果元素需要自定义属性，请用data-xxx方式命名。

2.严禁使用已在XHTML1.0中已移除的标签，如： s，i，b，font等

五、HTML其他规范

1、文档类型声明及编码，统一为html5声明类型<!DOCTYPE html>

编码统一为<meta charset="UTF-8" />，书写时利用IDE实现层次分明的缩进；

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

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

3、引入样式文件或JavaScript文件时, 须略去默认类型声明, 如下:

<link href="/Public/Home/Css/base.css" rel="stylesheet"/>

<script src="/Public/Home/Js/common.js"></script>；

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://105la.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、书写页面过程中, 请考虑向后扩展性。

六、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自身属性及样式继承原理减少代码量，比如:

<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></li></ul>，样式

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、杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7"/>兼容 ie8；

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

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

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

七、JavaScript书写规范

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

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

严禁在<head></header>之间引入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、严禁修改任何第三方插件的核心文件。