文档介绍：Web前端代码规范
此项目用于记录规范的、高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范。
前端普适性规范
黄金定律
永远遵循同一套编码规范,可以是这里列出的,也可以是你自己总结的。如果你发现本
规范中有任何错误,敬请指正。
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。
项目命名
项目名全部采用小写方式,以中划线分隔,禁止驼峰式命名。比如:my-project-name
文件命名
文件命名参照上一条规则,多个单词组成时,采用中划线连接方式,比如说: error-
有复数结构时,要采用复数命名法,比如说: scripts, styles, images, data-models
文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成,禁止包含特殊符号,比如空格、$等
为更好的表达语义,文件名使用英文名词命名,或英文简写。
不允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
引导页&首页
首页
下载页面
活动列表页面
视频
CDKEY页面
基本样式
框架布局
模块样式
全局样式
字体样式
首页样式
链接样式
打印样式
HTML 规范
语法
使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。
嵌套的节点应该缩进(四个空格)。
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线- HTML5 规范指出他们是可选的。
不要忽略可选的关闭标签(例如, 和</body>)。
![](images/)
HTML5 doctype
在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。
虽然doctype不区分大小写,但是按照惯例,doctype大写
<!DOCTYPE html>
语言属性
<html lang="en">
</html>
字符编码
通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样
做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与
文档编码一致(一般采用 UTF-8 编码)。
<meta charset="UTF-8">
IE 兼容模式
IE 支持通过特定的<meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈
的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-patible" content="IE=Edge">
响应式
<meta name="viewport" content="width=device-width, initial-scale=1">
引入 CSS 和 JavaScript
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。

<link rel="stylesheet" href="code-">

<style>
/* ... */
</style>

<script src="code-"></script>
实用高于完美
尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
减少标签数量
在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。参考下面的示例:

<span class="avatar">
![](...)
</span>

![](...)
属性顺序
HTML 属性应该按照特定的顺序出现