web前端开发规范

转载：http://www.w3cfuns.com/blog-5444268-5400074.html

一、 前端开发规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。本文档如有不对或者不合适的地方请提出来。

二、 基本准则
符合web标准, 语义化html标签；
结构、表现、行为三者相互分离, 兼容性优良；
页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。

三、文件规范
html, css, js, images文件均归档至<系统开发规范>约定的目录中;
html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_title_ 来组合命名, 以方便添加功能时查找对应页面，团结里的相互理解。
css文件命名: 英文命名, 后缀.css. 初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用_时间日期，example：new_blog_1212.css。
Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名。

四、html书写规范
文档类型声明及编码: 文档声明统一用，编码统一为。
非特殊情况下样式文件必须外链至……之间;非特殊情况下JavaScript文件必须外链至页面底部之前;
所有编码均遵循html5标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 成对的标签必须闭合<div>something</div>,<p>something</p>, 单独标签无需闭合，input type='text' name='demo'>,<br>等; 属性值必须用双引号包括;
充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等。
语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>< /div>;
引入JS库文件，统一使用requirejs或seajs加载JS。文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引 入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
书写链接地址时, 必须避免重定向，例如：href="http://www.baidu.com/", 即须在URL地址后面加上/；
在页面中避免使用style属性,即style="some style"
严格区分作为内容的图片和作为背景的图片。作为背景的图片采用Css sprite技术，放在一张大图里。Css sprite技术的优点是减少了http请求数，但使图片面向css的backround-position增加了耦合度，也增加了维护成本。如果图片有修改，不要删除已添加的图片，在空白处新增修改后的图片，减少修改风险。
图片必须加上alt属性; 给重要的元素和截断的元素加上title;
给区块代码及重要功能(比如循环)加上注释，方便阅读和后期维护。
特殊符号使用: 尽可能使用代码转义字符替代: 比如<,&,>``空格,»,等等;
书写页面过程中, 请考虑向后扩展性;
不要在 html 中加入标签来清理浮劢，通过在浮动元素的父元素上添加 .clearfix 来
清除浮动。.clearfix:after{content:"."; display:block;height:0;visibility:hidden;clear:both;} .clearfix{*zoom:1}
字体名称最好映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei)。
background、font 等可以缩写的属性，尽量使用缩写形式
background: color image repeat attachment position;
font: style weight size/lineHeight family;
不要直接为 html 标签添加 css 样式，比如div{width: 100px;｝

五、css书写规范
编码统一为utf-8;都用小写
class与id的使用: 一般都使用class，特殊除外，因id的优先级比class的高。
样式命名推荐使用英文避免使用汉语拼音, 尽量使用简易的单词组合; 命名方式参照《WEB前端开 发CSS命名参考》，格式统一采取head-nav,drop-menu的方式，通过-分割
css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据 自身习惯书写, 但尽量保证同类属性写在一起。
1) 定位属性：（比如：display, position, float, clear, visibility, table-layout）；

2) 自身属性：（比如：width, height, margin, padding, border）；

3) 文本属性：（比如：font, line-height, text-align, text-indent, vertical-align）；

4) 其他属性：（比如：color, background, opacity, cursor,content, list-style, quotes）。

避免滥用自选择器。#test span{}和#test .span{}选择尽量后者。提升性能的同时方便维护。
样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
使用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文件中我会初始化表格样式)
尽量不使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 和类似*html代码的写法。
用png图片做图片时, 要求图片格式为png-24格式。
兼容性属性的使用, 比如text-shadow（文字阴影）、css3的相关属性在保证目前主流浏览器使 用正常的情况下可以使用来对页面进行锦上添花式的设计。
减少使用影响性能的属性, 比如position:absolute || float，只是减少使用。
必须为大区块样式添加注释, 小区块适量注释。
代码缩进与格式:单行书写, 统一使用tab进行缩进。
避免 class 跟 id 重名。

六、JavaScript书写规范
文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 要检查网上down下来的代码造 成的代码污染(沉冗冲突，代码注入„)等，有的可以firefox的一些扩展插件分析;
库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定。
命名语义化, 尽可能利用英文单词或其缩写，函数命名首字母小写，采用驼峰命名法demoFunction。
代码结构明了, 加适量注释. 提高函数重用率;
JS代码应该与HTML彻底分离, 减小reflow, 注重性能。
避免全局变量。
命名语义化, 尽可能利用英文单词或其缩写。

七、图片规范
所有页面元素类图片均放入imges文件夹。
图片格式仅限于gif || png || jpg。
命名全部用 小写英文字母,数字,_ 的组合，其中不得包含汉字,空格,特殊字符；尽 量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
运用css sprite技术集中小的背景图或图标, 减小页面http请求。

八、注释规范
html注释: 注释格式 <!--这儿是注释-->, -只能在注释的始末位置,不可置入注释文字区域;
css注释: 注释格式 /*这儿是注释*/;
JavaScript注释, 单行注释使用//这儿是单行注释 ,多行注释使用/* 这儿有多行注释 */;

九、开发工具及测试工具约定
编码必须格式化, 比如缩进;
测试工具: 前期开发仅测试Chrome & IE8 , 后期优化时加入IE其他浏览器 & FireFox;
统一使用 RAP 编辑、查看、使用、校验接口数据

十、其他规范
开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;
减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德。 为用户着想, 为服务 器着想。

十一、CSS Hack
即便是完美的CSS 也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSS Hack 在很多情况下都是必要的，建议先以对CSS 标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编辑CSS ，最后再处理IE 的兼容性——单独为IE建立一个CSS 文件（比如 for-ie.css, fuck-ie.css, ie-hack.css等），最后在 HTML 文件中，通过IE的条件注释按需引用。