前端开发规范 - JUZI's blog

基本原则

结构、样式、行为分离

文档和模板只包含HTML结构，样式都放到样式表里，行为放到脚本中
缩进

统一tab缩进或空格缩进，不混用
文件编码

使用不带 BOM 的 UTF-8 编码。

在 HTML中指定编码
```
<meta charset="utf-8">
```
无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；
使用小写字母

省略外链资源URL协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。

<!--推荐-->
<script src="//www.google.com"></script>

.example {
	background:url("//www.google.com");
}
<!--不推荐-->
<script src="https://www.google.com"></script>

.example {
	background:url("https://www.google.com");
}

统一注释，单行注释双斜线与文字之间保留一个空格

若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。
文件名不含空格，一般只使用小写字母，包含多个单词时使用半角连词符‘-’分隔

HTML

尽量减少标签数量
Class应以功能或内容命名
class与id单词字母小写，class采用下划线分割，id使用驼峰法命名
避免创建无样式信息的 class
HTML 属性应该按照特定的顺序出现以保证易读性

id，class，name，data-xxx，src, for, type, href，title, alt，aria-xxx, role
属性的定义，统一使用双引号
语义嵌套约束，严格嵌套约束
语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。通常情况下，每个标签都是有语义的.语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。
为每个HTML页面的第一行添加标准模式的声明
```
<!DOCTYPE html>
```

lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages。

<!--中文-->
<html lang="zh-Hans">  
</html>
<!--简体中文-->
<html lang="zh-cmn-Hans">  
</html>
<!--英文-->
<html lang="en">  
</html>

IE兼容模式

优先使用最新版本的IE 和 Chrome 内核。
viewport

为移动端设备优化，设置可见区域的宽度和初始缩放比例
```
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
```
viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；

width: 浏览器宽度，输出设备中的页面可见区域宽度；

device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；

initial-scale: 初始缩放比例；

maximum-scale: 最大缩放比例；
favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件；使用 link 指定 favicon；
SEO优化

head模板

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <title>Title</title>
    <!--SEO-->
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <!--为移动设备添加viewport-->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--favicon-->
    <link rel="shortcut icon" href="favicon">
</html>

CSS

代码组织

以组件为单位组织代码段；

制定一致的注释规范；

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员来猜测一段不通用或不明显的代码的目的。
避免选择器嵌套层级过多，尽量少于 3 级；

避免选择器和 Class、ID 叠加使用；

出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用
声明顺序

相关属性应为一组，推荐的样式编写顺序

Positioning

Box model

Typographic

Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
媒体查询放在尽可能相关规则的附近
不要使用 @import

与相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
慎重选择高消耗的样式

高消耗属性在绘制前需要浏览器进行大量计算：

box-shadows

border-radius

transparency

transforms

CSS filters
避免过分重排
正确使用Display的属性

Display 属性会影响页面的渲染，请合理使用。

display: inline后不应该再使用 width、height、margin、padding 以及 float；

display: inline-block 后不应该再使用 float；

display: block 后不应该再使用 vertical-align；

display: table-* 后不应该再使用 margin 或者 float；
不滥用float
动画性能优化

动画的基本概念：

帧：在动画过程中，每一幅静止画面即为一“帧”;

帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second);

帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒);

跳帧(掉帧/丢帧)：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象。

一般浏览器的渲染刷新频率是 60 fps，所以在网页当中，帧率如果达到 50-60 fps 的动画将会相当流畅，让人感到舒适。

如果使用基于 javaScript 的动画，尽量使用requestAnimationFrame. 避免使用 setTimeout, setInterval.

避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。

使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。
3D或透视变换（perspective transform）CSS属性和对 opacity 进行 CSS 动画会创建新的图层，在硬件加速渲染通道的优化下，GPU 完成 3D 变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积重绘和重排。使用 translate3d 右移 500px 的动画流畅度要明显优于直接使用 left
CSS 选择器是从右到左进行规则匹配。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。把最右边选择符称之为关键选择器。

避免使用关键选择器是通配选择器的情况。

避免使用标签或class选择器限制id选择器

避免使用标签限制class选择器

避免使用多层标签选择器，使用class选择器替换，减少css查找

避免使用子选择器
```
/*不推荐*/
.tree ul li{}
/*推荐*/
.tree > ul > li{}
/*非常推荐*/
.tree-li{}
```
使用继承
```
/*不推荐*/
p > span{font-size:12px;}
/*推荐*/
p{font-size:12px;}
```

JavaScript

注释

没有必要，不加注释。有必要的注释写详尽。
单行注释必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
避免使用 /…/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

命名

变量：驼峰式
私有属性、变量和方法以下划线_开头
函数，函数参数：驼峰式
类、枚举变量：Pascal命名法，每个单词首字母大写
常量、枚举属性：使用全部字母大写，单词间下划线分割

命名语法

类名使用名词
函数名使用动宾短语
boolean类型的变量使用is或has开头
Promise对象用动宾短语的进行时表示

接口命名

可读性强
尽量不使用缩写

检测

类型检测优先使用typeof
对象检测使用instanceof
null 或 undefined 的检测使用 == null

事件

对 Ajax 加载的 DOM 元素绑定事件时尽量使用事件委托。事件委托允许在父元素绑定事件，子代元素可以响应事件，也包括 Ajax 加载后添加的子代元素；

链式写法

尽量使用链式写法而不是用变量缓存或者多次调用选择器方法；
当链式写法超过三次或者因为事件绑定变得复杂后，使用换行和缩进保持代码可读性；

性能优化

避免不必要的DOM操作
异步加载第三方内容