规范对一个每一个开发者来说都非常想去了解，也是开发过程中或者说决定一个开发者水平高低的重要衡量标准。我们平时所说的开发规范更多的是狭义上的编码规范，广义上的开发规范包括实际项目开发中可能涉及的所有规范，如项目技术选型规范、组件规范、接口规范、模块化规范等。无论哪种规范在团队内部一定要保持一致。
前端规范
一、三层结构
实现 hmtl、css、javascript 分离，保证最小耦合度。同时内联资源一般不超过 2KB，否则可能会导致html过大，页面首次加载时间过长。
1.1 缩进
原则上统一使用一种规范 比如 tab（或则4个空格进行缩进），现代 IDE 已经集成相应规范。
1.2 内容编码
html 文档中用 <meta charset="utf-8"> 来指定编码，以避免出现乱码问题。
css 不需要为其特意指定编码，其默认为utf-8
1.3 小写
html 标签、html 标签属性、样式名称及规则建议使用小写，我们一般习惯使用小写英文字符。
id 尽量用 驼峰命名(ID一般供javascript使用)，例如：listItem
class 使用 小写加 - 例如：list-item
1.4 代码单行长度限制
一般不超过120字符，或 80 字符（长字符串拼接通常使用加号来连接换行的内容）
1.5 注释
尽可能给代码写上注射，必要注释 必不可少
1.6 删除行尾空格与符号
删除行尾空格与多余的符号，这些内容没有存在必要（当然压缩打包工具往往也会自动处理）
二、HTML 规范
2.1 文档类型定义
推荐使用html5规范，简洁向后兼容
<!DOCTYPE html>
2.2 head 内容
必须定义 title、keyword、description，保证基本的 SEO 页面关键字和内容描述。移动端页面head要添加 viewport 页面不缩放，有利于提高页面渲染性能。建议在页面<head>上加上基本的社交 RICH 化消息，保证页面地址分享到主流社交平台后显示页面的缩略图、标题和描述
2.3 省略 type 属性
在引入 css、javascript时省略 type 属性，html5中给了默认值
<link href="a.css" rel="stylesheet"> // type="text/css"
<script src="a.js"></script> // type="text/javascript"
2.4 使用双引号包裹属性值
双引号与单引号 有利于区分标签属性名和属性值，标签属性值用双引号
<div class="ui-news"></div>
2.5 属性值省略
readonly、disabled、required等属性值是非必要属性，可以省略不写。
<input type="text" readonly>
2.6 嵌套
所有元素必须正确嵌套，尽量使用语意化标签,不允许交叉，不允许inline元素包含block元素
2.7 标签闭合
非闭合标签需添加关闭标签
<div></div>
自闭合标签无需关闭
<link href="" rel="">
2.8 使用 img 的 alt标签
有利于搜索引擎 seo，也有利于视觉障碍人的正常访问
2.9 使用 label 的 for 属性
<label for="inp"><label><input name="" id="inp">
2.10 按模块添加注释
便于开发中略读和维护
<!-- 新闻模块 S -->
<div id="news"></div>
<!-- 新闻模块 E -->
<!-- 排行模块 S -->
<div id="topic"></div>
<!-- 排行模块 E -->
2.11 标签元素格式化
保持合理缩进，这样更有层次和可维护性。块级元素单起一行，行内元素视情况而定。
2.12 语义化
合理的地方选择合理的语义标签。不要使用被h5 废弃的标签
三、css 规范
3.1 css 引用规范
尽量使用外部样式，尽量不使用行内样式。 这样更利于浏览器缓存和后期维护。
3.2 样式的命名约定
推荐使用 小写英文缩写加中划线，例如：list-item
注意：1.尽量不要用单个单词命名（容易重复、难以理解） 2.不以模块表现样式（left、right、red、black）来命名，要根据内容（nav、news、type、search）命名。 3.不要在id上添加样式
简写方式
-
- 单位 0 的缩写，值为 0 要省略后面的单位。如果以0为个数位的小数，可以省略不写0.
-
2.background-image: url(a.png) 去掉URL中引用资源的引号，这是没必要的。
- 3.颜色值要使用小写并尽量缩写至3位
3.3 属性书写顺序
先布局（position、display、float、overflow）后内容（color、font、text-align）
3.4 Hack 写法
尽量减少，必要兼容低版本浏览器时，选择适当 最佳方式。
3.5 css高效实现规范
-
1.标签名、id、class组合的选择器会造成冗余，降低css的解析速度，尽量避免
-
2.尽量使用简短的css实现方式，对于无继承关系的元素使用合并的写法更简洁
-
3.不同元素之间属性存在继承关系时，使用分拆方式，避免继承属性的重复定义
3.6 使用预处理脚本编码开发
sass、less提高开发效率