web前端开发规范

web前端开发规范

# web前端开发规范
## 目录  
- 一、规范目的 
- 二、基本准则
- 三、文件规范
- 四、html书写规范
- 五、css书写规范
- 六、JavaScript书写规范
- 七、图片规范
- 八、注释规范
- 九、开发及测试工具约定
- 十、其他规范
- 十一、CSS Hack

## 一、 规范目的

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

## 二、 基本准则

1. 符合web标准, 语义化html.
2. 结构表现行为分离, 兼容性优良. 
3. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。

## 三、文件规范

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

## 四、html书写规范

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

## 五、css书写规范

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

> 1) 定位属性（比如：display, position, float, clear, visibility, table-layout等） 

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

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

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


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

## 六、JavaScript书写规范

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

## 七、图片规范

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

## 八、注释规范

1. html注释: 注释格式 ``, `-`只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 `/*这儿是注释*/`;
3. JavaScript注释, 单行注释使用`//这儿是单行注释` ,多行注释使用`/* 这儿有多行注释 */`; 

## 九、开发工具及测试工具约定

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

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

##十一、CSS Hack

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