代码规范

01 黄金定律：不管有多少人共同参与同一项目， 一定要确保每一行代码都像是同一个人编写的。

02: 语法；用两个空格来代替制表符（tab）， – 这是唯一能保证在所有环境下获得一致展现的方法。

03：嵌套元素应当缩进一次（即两个空格）

04：对于属性的定义 确保全部使用双引号 绝对不要使用单引号

05：不要在自闭和元素的尾部添加斜线

06：不要省略结束标签

07：语言属性： 根据HTMN5 规范

08：强烈建议 html 根元素指定lang 属性 从而为文档的设置正确语言 这将有助于

合成工具确定其 所在的应该采用的发音 有助于翻译工具确定其翻译时应遵守的规则

09：IE 兼容 ：IE 支持通过特定的 标签来确定档期那页面所应该采用的IE版本 除非有强烈的特殊需求

否则 最好是设置为edge  mode 从而通知IE 采用其所支持的最新模式

10：字符编码： 通过明确字符编码 能够确保浏览器快速 并容易的判断 页面 内容的渲染方式

这样做的好处是 可以避免在html 中使用 字符尸体标记 从而全部 于文档编码一致

（一般采用 UTF-8 编码）

11：根据html5 规范 在引用 css 和javaScript 文件是一半不需要

指定type 类型 因为text/css 高和text/javascript分别是他们的默认值

亲引用时记得写好备注呀。

12：使用为王：尽量遵循 html 标准和语义 但不要 牺牲使用为代码

任何时候 多要精良使用最少点 标签并标尺最小的复杂度

13：属性顺序 class id name data title alt aria role

14: 减少代码的使用量 编写html 代码时 尽量避免多余的父元素 很多时候需要重构来实现

15： java script 标签 通过javaScript 生成的标签 让内容那个 变得不宜查找 编辑 并且降低

 性能 能避免尽量避免

16： css 用两个空格来替代制表符 这是 唯一能保证 在所有环境下 获得展现一致的方法

17： 用选择器分组时，将单独的选择器单独放在一行

18： 为了代码的易读性 在每个声明块 的左花括号 添加一个空格

19： 声明的右花括号应该单独成行

20： 每条声明语句之后应该插入一个空格

21： 为了获取更准确的错误报告 声明应该单独成行

22： 所有的声明 多应该以分号 结尾 最后一条声明语句是可选择的

 但省略这个分号 你的代码更容易出错

23： 对于以逗号 分割的属性值 后面都应该插入一个空格

24： 不要再rig() rgba() hsl hsal() rect 值得内容后 插入空格

 （只加逗号 不加空格）

25： 对于属性值小于1 的数字 前面的0 可以去掉

26： .5 替代 0.5

27： 十六进制应该全部小写 小写字符更容易分辨

 因为他们的形式更容易区分

28： 尽量使用 简写形式的十六进制

29: 使用 margin:0; 替代margin：0px；

30: 相关的属性值归为一组 并按照 下面的顺序排序

 position box model type visual

(position 可以从正常的文档流中移除元素 并且还能覆盖盒子模型的相关样式）

 盒子模型在第二位 因为他决定了组件的尺寸和位置，其他属性只影响组件的内容

 或者不影响前两个组件的属性 完整的属性列表请参考 rcess

31: 不要适应@import 相比link 指令要慢得多 不光添加额外的请求参数 还会导致

 不可预料问题 

 解决方案：使用 多个 link 元素 通过sass less 类似 css 预处理器 将多个 css 文件编译为一个文件

32： 媒体查询的位置：（media query）将媒体查询放在尽可能相关规则的附近

 不要将他们打包 放在一个单一样式文件中或者文档的底部 如果把他们分开了

 大家很容易会遗忘

33： 带前缀的属性 当使用特定的带有前缀的属性时 通过缩进的方式

 让每个属性值的垂直方向对其 这样便于多行编辑

34： 单行规则的声明：对于只包含一条声明的样式 为了易读性 便于快速编辑

 建议将语句放在同一行 对于有多条的生命样式 还应该分为多行

 这样做的关键因素是为了错误检测 --

35： 简写形式的属性 但不要滥用简写

36： 注释： 代码是需要有人维护 确保你的代码 能够自我描述 注释良好

 并且更易于他人理解 好的代码注释 能够传达 上下文关系 和代码目的

 不要简单的只会使用class （对于较长的注释务必书写完整的句子）

37： class命名 在命名中 只能出现小写字符和破折号 不是下划线也不是 驼峰命名法

 避免过度的任意的简写

 使用由意义的名称 使得 有组织有意义的名称 不要使用表现形式

38： 基于父级class 作为新的class 使用 js-class 来表示行为不要将这些class 包含的 css中

39： 选择器 对于通用的元素使用class 这样利于渲染性能的优化

 对于经常出现的组将 避免使用属性选择器

 经可能简短 并且尽量限制组成选择器的元素的个数

 建议不要超过3个   

 将class 限制在最近父元素内（也是后代选择器）

40： 代码组织 ： 以组件为单位进行代码组织 指定一致的注释规范

 使用一致的空白符将代码风格成块 这样有利于扫描较大的文档

 如果使用多个css 文件 将他们按照组件 而非页面进行 拆分

 因为页面会被重组 而组件只会被移动 

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

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