不管参与项目的人数有多少，确保每一行代码都像是同一个人编写的;

 

　　规范的代码可以更易于阅读与维护，对长期项目大有裨益；

 

　　实施代码规范减少低级 bug 的出现概率；

 

　　实施代码规范增加代码可读性，提高协作开发效率；

 

　　提供相关工具（插件），保障代码规范的无缝接入。

 

　　代码编辑器的设置 将编辑器 按照下面的配置进行设置 以避免常见的代码不一致的差异

 

　　用两个空格代替制表符 文档设置为utf-8 在文件结尾添加 一个空白行

 

　　在 web 项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所当然的，减号应该也是用来分隔资源名称的好选择。

 

　　请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如 compass[1] 中的下划线就是用来标记跳过直接编译的文件用的）。

 

　　资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。

 

　　还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

 

　　大多 Web 服务器 （Apache, Unix） 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

 

　　其他 Web 服务器 （Microsoft, IIS） 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

 

　　你必须保持统一的风格，我们建议统一使用小写的文件名。

 

　　全部使用小写字母组成，由字母和数字中滑线组成。（box, cell-box , cell-form-preview）。

 

　　推荐

 

　　不推荐

 

　　参照文件命名通用规则

 

　　图标类图片，需在文件名前面加上 ico_ 前缀。背景类图片，需在文件名前面加上 bg_ 前缀。雪碧图图片，需在文件名后面加上 _sprite 后缀。Retina 图片，需在文件名后面加上 _1x 或 _2x 后缀来标记原图和 2 倍图。

 

　　结构、表现、行为三者分离。

 

　　尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。

 

　　在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

 

　　建议：

 

　　HTML只关注内容

 

　　HTML只显示展示内容信息

 

　　不要引入一些特定的 HTML 结构来解决一些视觉设计问题

 

　　不要将img元素当做专门用来做视觉设计的元素

 

　　样式上的问题应该使用css解决

 

　　css 引用置于头部标签内。js 引用置于底部标签前。（部分场景除外，例如：计算font-size大小的代码）不要使用 HTML5 规范中已经被废弃的标签（具体废弃的标签请自行查阅文档）；使用 label 包裹附加文字的表单输入框（radio、checkbox）；属性名全小写，多个单词用中划线做分隔符；属性值使用双引号，不要使用单引号；每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进，缩进使用 2空格;

 

　　推荐使用 HTML5 的文档类型申明：

 

　　页面开头必须有文档头声明，推荐使用 HTML5 简单的 doctype 声明来启用标准模式，使页面在每个浏览器中尽可能一致的展现。

 

　　按照惯例，doctype 应大写。

 

　　示例：

 

　　html根元素指定lang属性，从而为文档设置正确的语言。

 

　　如下，如果是英文的网页，应该这么写：

 

　　一个原因是避免网页显示unicode符号时乱码，写在前面是因为w3c有规定，语言编码要在html文档的前1024个字节。如果不写的话在老的浏览器会有utf-7攻击的隐患，具体可以自行查阅资料，只是现在的浏览器基本都去掉了对utf-7编码的支持了。

 

　　示例：

 

　　如果是单页面推荐使用默认title为载入中 或者 loading。

 

　　示例：

 

　　HTML 属性应当按照特定的顺序依次排列，确保代码的易读性和可维护性。

 

　　Class 用于标识高度可复用组件，因此应该排在首位；id 用于标识具体组件，排在第二位。

 

　　claas

 

　　id

 

　　name

 

　　data-*

 

　　src, for,type,href,value,max-length,max,min,pattern

 

　　placeholder,title,alt

 

　　aria-*,role

 

　　required,readonly,disabled

 

　　HTML5 规范中，boolean 属性不需要声明属性值。

 

　　Boolean 属性的存在表示取值为 true，不存在则表示取值为 false。

 

　　出于性能考虑，脚本异步加载很关键。一段脚本放置在 内，比如 ，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。

 

　　异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+，可将 HTML5 的 async 属性加至脚本中，它可防止阻塞 DOM 的解析，甚至你可以将脚本引用写在 里也没有影响。

 

　　如需兼容老旧的浏览器，实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是：一直要等到 CSS 对象文档已就绪，它们才开始加载（短暂地在 CSS 加载完毕之后），这就对需要及时触发的 JS 造成了一定的延迟，这多多少少也影响了用户体验吧。