web前端开发规范文档(2014年版本)

时间：2017-04-08

规范说明

此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。

基本准则

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

总规范

1.忽略（Omit）协议：如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换，除非必须使用某个协议
2.书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。

因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。

如sublime text，在这个工具中可以对tab键进行设置。

3.标签属性使用小写

4.尾部不要留有空格，以防diff

5.使用 UTF-8 (no BOM)，文档中也加入 <meta charset=”utf-8″>

6.文件命名统一使用小写”.js”，同时推荐”-”而不是”_”

7.TODO(contact) 以及TODO: action item，不要使用@@

HTML 细化规范
1.使用html5的规范<!DOCTYPE html>
2.<img>标签默认缺省格式：<img src="xxx.png" alt="缺省时文字" /> 避免出现src="" 问题
3.<a>标签缺省格式：<a href="###" title="链接名称">xxx</> 注：target="_blank" 根据需求决定
4.<a>标签预留链接占位符使用###，参见：a标签占位符问题
5.书写链接地址时, 必须避免重定向，例如：href=”http://itaolun.com/”, 即须在URL地址后面加上“/”
6.所有标签需要符合XHTML标准闭合
7.一律统一标签结尾斜杠的书写形式：<br /> <hr /> 注意之间空格
8.避免使用已过时标签，如：<b> <u> <i> 而用 <strong> <em>等代替
9.使用data-xxx来添加自定义数据，如：<input data-xxx="yyy"/>
10.避免使用style="xxx:xxx;"的内联样式表
特殊符号使用参考HTML 符号实体
11.必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

CSS 细化规范
1. 每个样式属性后加 ";"
方便压缩工具"断句"。
2. Class命名，采用” - “[减号连接符] 对class中的字母分隔：
用"-"隔开比使用驼峰是更加清晰。
产品线-产品-模块-子模块，命名的时候也可以使用这种方式
ID: 小驼峰式命名法如：
firstName topBoxList footerCopyright
3. 空格的使用，以下规则执行：

.hotel-content { 
font-weight: bold; 
}

选择器与 { 之前要有空格
属性名的 : 后要有空格
属性名的 : 前（禁止）加空格
一个原因是美观，其次IE 6存在一个bug，戳bug
4. （推荐）属性的书写顺序, 举个例子:

.hotel-content {
     /* 定位 */
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     /* 盒模型 */
     width: 50px;
     height: 50px;
     margin: 10px;
     border: 1px solid black;
     / *其他* /
     color: #efefef;
}

定位相关, 常见的有：display position left top float 等
盒模型相关, 常见的有：width height margin padding border 等
其他属性

按照这样的顺序书写可见提升浏览器渲染dom的性能
　　简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~
推荐文章：

Poll Results: How do you order your CSS properties?
http://www.mozilla.org/css/base/content.css
5. （推荐）当编写针对特定html结构的样式时，使用元素名 + 类名

/* 所有的nav都是针对ul编写的 */
ul.nav {
     ......
}

共2页:

上一篇1/2

上一篇：前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范 下一篇：利用纯CSS3实现动态的自行车特效源码

web前端开发规范文档(2014年版本)

相关文章

最新文章