前端业界规范（aotu.io）
开篇
前端代码规范 是由 凹凸实验室 整理的，基于 W3C、苹果开发者 等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。
旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，
以下规范是团队基本约定的内容，必须严格遵循。
HTML规范
基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
命名规范
从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
JavaScript 规范
统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。
注释
开发功能代码时,对应html、css、js需要有注释信息,方便开发人员通过注释快速了解功能相关信息
例子 OK
/**`` ``* Created by auth on 18/08/15. (标明作者、文件版本、创建 / 修改时间)`` ``* @description (功能详细描述、重大版本修改记录)`` ``*`` ``*/` `// 函数或者类等都要添加注释``function` `fooFunction(arg1, arg2) {`` ``//函数描述``}
命名规范
1、js命名规则 函数命名:英文单词的驼峰法命名 编码命:名由_字母组成
2、css命名规则 employee-info,单词之前用-隔开
3、不要用拼音来命名,需用英文单词命名
HTML篇
常用语义化标签
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。 常见标签语义
| 标签 | 语义 |
|---|---|
<p> |
段落 |
<h1> <h2> <h3> ... |
标题 |
<ul> |
无序列表 |
<ol> |
有序列表 |
<b> |
为样式加粗而加粗 |
<storng> |
为强调内容而加粗 |
<i> |
为样式倾斜而倾斜 |
<em> |
为强调内容而倾斜 |
abbr |
缩写 |
例:将构建的页面当作一本书，标签的语义对应的其功能和含义；
书的名称：<h1>
书的每个章节标题：<h2>
章节内的文章标题：<h3>
小标题/副标题：<h4> <h5> <h6>
章节的段落：<p>
文档声明
1、为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
2、IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。
除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
CSS篇
css属性书写顺序
1、显示属性 2、元素位置 3、元素属性 4、元素内容属性
header { /* 显示属性 */ display || visibility list-style position top || right || bottom || left z-index clear float ` /* 自身属性 */ width max-width || min-width height max-height || min-height overflow || clip margin padding outline border background` `/* 文本属性 */colorfonttext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorcontent``}`
css属性写法
1、小图片（必须）sprite 合并（将需要用到的小图片全部放到一个大的图片上，通过定位来展示大图片上不同地方的小图片，从而减少图片占用的资源，加快网页加载的速度。）
2、每个样式属性后加;,方便压缩工具“断句”。
3、禁止将样式写为单行(单行显示不好注释，不好备注，这最后可以交给压缩工具处理)。
4、禁止使用行内inline样式。
5、禁止使用"*"来选择元素
//（别这样写,这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。）* { margin: 0; padding: 0;}
6、多选择器规则之间必须换行当样式针对多个选择器时每个选择器占一行
// 推荐的写法a.btn,input.btn,input[type="button"] { ......}
css加载
不建议在body加入<link rel="stylesheet">
HTML 规范并没有规定 CSS 应当怎样阻止页面渲染，它不鼓励在 body 中使用<link rel="stylesheet">，但是所有的浏览器都允许使用。当然了，浏览器们在处理 body 中的 link 时都有自己的方法：
- Chrome和Safari：一旦发现
<link rel="stylesheet">就停止渲染，并且在已发现的样式表全部完成加载之前不会开始渲染。这会导致<link>前未被渲染的内容也被阻塞。 - Firefox： head中的
<link rel="stylesheet">会阻塞渲染，直至所有已发现的样式表加载完毕，body中的<link rel="stylesheet">并不阻塞任何渲染，除非某个 head 中的样式表已经阻塞了渲染，这会导致无样式的内容出现闪烁（FOUC）。 - IE/Edge： 阻塞解析器直到样式表加载完毕，但是允许渲染
<link>之前的内容。
JavaScript篇
命名规范
1、文件命名:可读性强文件夹、文件的命名与命名空间应能代表代码功能，可读性强。
2、函数命名:驼峰命名方式,函数名字应体现出该函数的作用
function funName() {}
3、常量:大写
const VARIABLENAME
4、变量
变量名应体现出该变量的内容
通过加下划线体现其局部变量的含义，如 employee _name;
编码规则
1、排版缩进 采用统一的缩进方式排版代码。缩进必须是软tab（用空格字符）。（这里的tab的要求是4个空格）
2、关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符,后面使用空格
var name[空格]=[空格]value;if[空格](a,[空格]b) {}
3、左大括号{可以居行尾，也可写在下行首（独自一行）；右大括号}单独占一行，居行首
if (a && b) { }------------------------if (a && b){}
4、句末必须用分号结尾
var fn = function () {};//这里没有分号的话，脚本解析器会报错！！！(function () { alert(1);})();
5、单行过长应在适当位置予以换行,增强可读性 if 语句括号中的条件若过多过长，应予以折行；折行后，||、&& 等符号应与 ; 后的第一个字母纵向对齐
if (condition1 && condition2 || condition3) {}
6、if、while、for、do语句的执行体总是用{和}括起来，即使在其结构体内只有一条语句
if (s==100) { alert('shit!');}
7、语法意义相互独立的代码将用空行分隔
a++; b++; //！！！避免同一行书写两个表达式if (a > b) { value = a; //行间不用空行间隔} var variableName = value; //与上一代码行使用空行间隔