前端开发规范

前端开发规范

一、基本原则

结构、样式、行为分离

尽量确保文档和模板只包含HTML结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用Tab或者Tab、空格混搭。

文件编码

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

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

标签一律使用小写字母

注释

css注释

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

js注释

// 单行注释;后跟一个空格，缩进与下一行被注释说明的代码一致。
/*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

HTML规范

自闭合（self-closing）标签，无需闭合 ( 例如：img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；

class 与 id

• class 应以功能或内容命名，不以表现形式命名；
• class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
• 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

属性顺序

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

引号

属性的定义，统一使用双引号。

嵌套

• a不允许嵌套div 这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a不允许嵌套a。
• 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

布尔值属性

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

css规范

• 使用语义化、通用的命名方式；
• 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
• 避免选择器嵌套层级过多，尽量少于 3 级；
• 避免选择器和 Class、ID 叠加使用；

说明：
1、出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。
2、元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。

声明块格式

• 选择器分组时，保持独立的选择器占用一行；
• 声明块的左括号 { 前添加一个空格；
• 声明块的右括号 } 应单独成行；
• 声明语句中的 : 后应添加一个空格；
• 声明语句应以分号 ; 结尾；
• 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
• rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
• 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px ；

声明顺序

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

1. Positioning
2. Box model
3. Typographic
4. Visual

分析：
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

不要使用@import

与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
替代办法：

• 使用多个 元素；
• 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
• 其他 CSS 文件合并工具；

模块组织

任何超过 1000 行的 CSS 代码，你都曾经历过这样的体验：

1. 这个 class 到底是什么意思呢？
2. 这个 class 在哪里被使用呢？
3. 如果我创建一个 xxoo class，会造成冲突吗？

Reasonable System for CSS Stylesheet Structure 的目标就是解决以上问题，它不是一个框架，而是通过规范，让你构建更健壮和可维护的 CSS 代码。

Components（组件）

从 Components 的角度思考，将网站的模块都作为一个独立的 Components。

Naming components （组件命名）

Components 最少以两个单词命名，通过 - 分离，例如：

• 点赞按钮 (.like-button)
• 搜索框 (.search-form)
• 文章卡片 (.article-card)

jQuery 规范

jQuery 变量

• 存放 jQuery 对象的变量以 $ 开头；
• 将 jQuery 选择器返回的对象缓存到本地变量中复用；
• 使用驼峰命名变量；

选择器

1. 尽可能的使用 ID 选择器，因为它会调用浏览器原生方法 document.getElementById 查找元素。当然直接2 使用原生 document.getElementById 方法性能会更好；
2. 在父元素中选择子元素使用 .find() 方法性能会更好, 因为 ID 选择器没有使用到 Sizzle 选择器引擎来查找元素；

DOM 操作

1. 当要操作 DOM 元素的时候，尽量将其分离节点，操作结束后，再插入节点；
2. 使用字符串连接或 array.join 要比 .append()性能更好；

事件

1. 如果需要，对事件使用自定义的 namespace，这样容易解绑特定的事件，而不会影响到此 DOM 元素的其他事件监听；
2. 对 Ajax 加载的 DOM 元素绑定事件时尽量使用事件委托。事件委托允许在父元素绑定事件，子代元素可以响应事件，也包括 Ajax 加载后添加的子代元素；

链式写法

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