code-review之前端代码规范及优化

所谓无规矩不成方圆，前端时间在团队 code-review 中发现，不同时期不同开发人员写的代码可谓五花八门。因此我们提出了一些相关代码方面的规范，希望日后能形成团队的编码规范。
制定开发规范的目的

统一编码风格，规范，提高团队协作效率
在团队协作中输出可读性强，易维护，风格一致的代码

HTML 篇

启用标准模式

使用 HTML5 的 doctype 来启用标准模式

<!DOCTYPE html>

统一使用 UTF-8 编码

<meta charset="utf-8" />

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

移动设备添加 viewport

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />

自闭合标签无需闭合

例如： img， input， br， hr 等

<img src="https://xxx.png" alt="Google" />
<br />
<input type="text" name="title" />

使用语义化标签

html 的标签能使用语义化的，尽量使用语义化标签，避免一个页面都是 div 或者 p 标签

<!-- bad -->
<div>
  <p></p>
</div>
<!-- good -->
<header></header>
<footer></footer>

属性顺序要求

HTML 属性应该按照特定的顺序出现以保证易读性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

CSS 篇

BEM 命名原则

block：模块，名字单词间用 - 连接
element：元素，模块的子元素，以 __ 与 block 连接
modifier：修饰，模块的变体，定义特殊模块，以 — 与 block 连接
```
/* 举个例子 */
.block__element {
}
.block--modifier {
}
```
有效使用 css 选择器
选择器嵌套应少于 3 级 ```css / bad / .page .header .login #username input { } / good /
username input {
}

有效使用 css 选择器，因遵循以下原则
- 保持简单，不要使用嵌套过多过于复杂的选择器。
- 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
- 不要使用类选择器和 ID 选择器修饰元素标签。
- 不要为了追求速度而放弃可读性与可维护性
- 避免使用 CSS 表达式
<a name="iolMM"></a>
#### 慎重选择高消耗的样式
高消耗属性在绘制前需要浏览器进行大量计算：
```css
box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）

避免重绘重排

当发生重排的时候，浏览器需要重新计算布局位置与大小，不利于性能优化。
常见引起重绘重排属性和方法

添加或者删除可见的 DOM 元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在 input 框中输入文字
浏览器窗口尺寸改变——resize 事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

减少重绘重排的方法

使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
不要把节点的属性值放在一个循环里当成循环里的变量。
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免节点层级过多

Arc Design System

介绍