编码规范

• 尽量三层结构分离。移动端可以适当内联，但内联资源2KB以内。

• HTML标签、标签属性、样式名及规则建议小写。HTML的 id 属性使用驼峰式命名。

  <ul id="menuList" class="menu-list">
    <li class="menu-list-item">1</li>
    <li class="menu-list-item">2</li>
  </ul>
  复制代码

• 多注释，尽量在文件头部添加verilog那样的多行文件注释。此外，更推荐使用 自文档化风格的代码 进行开发，让代码本身具有含义从而代替注释。

  // 常规代码块
  let width = (value - 0.5) * 16;
  // 自文档化风格代码。内容更多，但便于维护。
  let width = emToPixels(value);
  function emToPixels(ems) {
    return (ems - 0.5) * 16;
  }
  复制代码

HTML规范

• Doctype统一使用HTML5的 ，既简洁又向后兼容。
• head里面必须定义title、keyword、description，保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放。
• 引入CSS或JS文件时，省略它们的type属性，不需要 type="text/css" 之类的
• 引号问题 ：所有标签属性值使用双引号，便于区分标签的属性名和属性值。(JS里面字符串值推荐单引号)（注意JSON里的字符串，无论键值都必须双引号）
• 省略非必需的属性值，如输入框里的 readonly、disabled、required。例如 <input type="text" readonly="readonly" 写成 <input type="text" readonly 就行了。
• 自闭标签如link、img等，可以不加/关闭标签
• 使用label的for属性，这样点击label的时候就会选中到与之对应的input或者textarea上。例如 <label for="blue">蓝色</label> <input type="radio" id="blue" name="color">
• 在每个大的模块的开始和结束的地方都添加注释标记

CSS规范

• 引用规范：使用link的方式调用外部样式文件，可以复用并能利用缓存提高加载速度。
• 命名约定：
  • 一般由小写单词和中画线组成，按功能可以加上相应的统一前缀 如ui-xxx
  • 不以模块表现样式命名，要根据内容命名，避免使用left、top、red之类的单词
  • HTML标签中的id属性一般用于JS查询DOM，CSS中尽量避免使用id选择器
• 简写方式：url中引用资源没必要引号括起来。 十六进制颜色值使用小写
• 属性书写顺序：
  1. 定位属性：position display float left top right bottom overflow clear z-index
  2. 自身属性：width height margin padding border background
  3. 文字样式：font-family font-size font-style font-weight font-varient color
  4. 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
  5. css3中新增属性：content box-shadow border-radius transform……
• 高效实现规范：标签名与class组合的选择器会降低CSS解析速度。 不同元素之间属性存在继承关系时，使用分拆方式避免属性重复定义。

ECMAScript5 常用规范

• 添加适当的空格和空行
• 变量命名：标准变量采用驼峰式命名；常量使用全大写命名，并用下划线连接；构造函数首字母大写；jQuery对象推荐以" body=$('body');`
• 条件判断：尽量不要直接使用undefined进行变量判断，使用typeof和字符串‘undefined’对变量类型进行判断。
• 不要在条件语句或循环语句中声明函数
• 其他：不要给内置对象的原型(如Array,Date)上添加方法；同一作用域下不要声明同名变量……

ECMAScript6+ 参考规范

let name='Morty'; let str='<h2>Hi, ${name}!<h2>'
const items=[1,2,3]; let itemsCopy=[...items]