前端开发规范
1. 基本原则
基本原则
结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。
缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
文件编码
使用不带 BOM 的 UTF-8 编码。
· 在 HTML中指定编码 <meta charset="utf-8"> ；
· 无需使用 @charset 指定样式表的编码，它默认为 UTF-8
一律使用小写字母
省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。
统一注释
通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。
HTML 注释
·
模块注释
<!-- 文章列表列表模块 --><div class="article-list">
...</div>
· 区块注释
· <!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
CSS 注释
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
JavaScript 注释
· 单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
· 多行注释
避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
· 函数/方法注释
· 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；
· 参数和返回值注释必须包含类型信息和说明；
· 当函数是内部函数，外部不可访问时，可以使用 @inner 标识；
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。
HTML
通用约定
标签
· 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
· 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；
· 尽量减少标签数量；
Class 与 ID
· class 应以功能或内容命名，不以表现形式命名；
· class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
· 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
· id
· class
· name
· data-xxx
· src, for, type, href
· title, alt
· aria-xxx, role
引号
属性的定义，统一使用双引号。
嵌套
a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。
严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
语义嵌套约束
· <li> 用于 <ul> 或 <ol> 下；
· <dd>, <dt> 用于 <dl> 下；
· <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；
严格嵌套约束
· inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
· <a>里不可以嵌套交互式元素<a>、<button>、<select>等;
· <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值。
语义化
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。
HEAD
HEAD
文档类型
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html>
语言属性
为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？
<!-- 中文 --><html lang="zh-Hans">
<!-- 简体中文 --><html lang="zh-cmn-Hans">
<!-- 繁体中文 --><html lang="zh-cmn-Hant">
<!-- English --><html lang="en">
字符编码
· 以无 BOM 的 utf-8 编码作为文件格式;
· 指定字符编码的 meta 必须是 head 的第一个直接子元素；
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body></html>
IE 兼容模式
优先使用最新版本的IE 和 Chrome 内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SEO 优化
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address"></head>
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：
· 在 Web Server 根目录放置 favicon.ico 文件；
· 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">
CSS
3.1 通用约定
通用约定
代码组织
· 以组件为单位组织代码段；
· 制定一致的注释规范；
· 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
· 果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。
提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。
Class 和 ID
· 使用语义化、通用的命名方式；
· 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
· 避免选择器嵌套层级过多，尽量少于 3 级；
· 避免选择器和 Class、ID 叠加使用；
声明块格式
· 选择器分组时，保持独立的选择器占用一行；
· 声明块的左括号 { 前添加一个空格；
· 声明块的右括号 } 应单独成行；
· 声明语句中的 : 后应添加一个空格；
· 声明语句应以分号 ; 结尾；
· 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
· rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
· 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
· 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
· 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；
JavaScript
通用约定
注释
原则
· As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
· As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。
单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
多行注释
避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
函数/方法注释
1. 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；
2. 参数和返回值注释必须包含类型信息和说明；
3. 当函数是内部函数，外部不可访问时，可以使用 @inner 标识；
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。
命名
变量, 使用 Camel 命名法。
常量, 使用全部字母大写，单词间下划线分隔的命名方式。
var HTML_ENTITY = {};
1. 函数, 使用 Camel 命名法。
2. 函数的参数, 使用 Camel 命名法。
1. 类, 使用 Pascal 命名法
2. 类的 方法 / 属性, 使用 Camel 命名法
1. 枚举变量 使用 Pascal 命名法。
2. 枚举的属性， 使用全部字母大写，单词间下划线分隔的命名方式。
3. 由多个单词组成的 缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
接口命名规范
1. 可读性强，见名晓义；
2. 尽量不与 jQuery 社区已有的习惯冲突；
3. 尽量写全。不用缩写，除非是下面列表中约定的；（变量以表达清楚为目标，uglify 会完成压缩体积工作）
常用词 | 说明 |
options | 表示选项，与 jQuery 社区保持一致，不要用 config, opts 等 |
active | 表示当前，不要用 current 等 |
index | 表示索引，不要用 idx 等 |
trigger | 触点元素 |
triggerType | 触发类型、方式 |
context | 表示传入的 this 对象 |
object | 推荐写全，不推荐简写为 o, obj 等 |
element | 推荐写全，不推荐简写为 el, elem 等 |
length | 不要写成 len, l |
prev | previous 的缩写 |
next | next 下一个 |
constructor | 不能写成 ctor |
easing | 示动画平滑函数 |
min | minimize 的缩写 |
max | maximize 的缩写 |
DOM | 不要写成 dom, Dom |
.hbs | 使用 hbs 后缀表示模版 |
btn | button 的缩写 |
link | 超链接 |
title | 主要文本 |
img | 图片路径（img标签src属性） |
dataset | html5 data-xxx 数据接口 |
theme | 主题 |
className | 类名 |
classNameSpace | class 命名空间 |
