10、前端代码规范
本文系转载，原文链接：http://alloyteam.github.io/CodeGuide/✍
Code Guide by @AlloyTeam
Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript
通过分析github代码库总结出来的工程师代码书写习惯：GO!!!
目录
命名规则
- 项目命名
- 目录命名
- JS文件命名
- CSS, SCSS文件命名
- HTML文件命名
HTML
- 语法
- HTML5 doctype
- lang属性
- 字符编码
- IE兼容模式
- 引入CSS, JS
- 属性顺序
- boolean属性
- JS生成标签
- 减少标签数量
- 实用高于完美
CSS, SCSS
- 缩进
- 分号
- 空格
- 空行
- 换行
- 注释
- 引号
- 命名
- 属性声明顺序
- 颜色
- 属性简写
- 媒体查询
- SCSS相关
- 杂项
JavaScript
- 缩进
- 单行长度
- 分号
- 空格
- 空行
- 换行
- 单行注释
- 多行注释
- 文档注释
- 引号
- 变量命名
- 变量声明
- 函数
- 数组、对象
- 括号
- null
- undefined
- jshint
- 杂项
编辑器配置和构建检查
- sublime3插件
- grunt插件
最佳原则
坚持制定好的代码规范。
无论团队人数多少，代码应该同出一门。
如果你想要为这个规范做贡献或觉得有不合理的地方，请访问New Issue。
命名规则
项目命名
全部采用小写方式， 以下划线分隔。
例：my_project_name
目录命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts, styles, images, data_models
JS文件命名
参照项目命名规则。
例：account_model.js
CSS, SCSS文件命名
参照项目命名规则。
例：retina_sprites.scss
HTML文件命名
参照项目命名规则。
例：error_report.html
HTML
语法
- 缩进使用soft tab（4个空格）；
- 嵌套的节点应该缩进；
- 在属性上，使用双引号，不要使用单引号；
- 属性名全小写，用中划线做分隔符；
- 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
- 不要忽略可选的关闭标签，例：
</li>和</body>。
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company_logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>HTML5 doctype
在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；
虽然doctype不区分大小写，但是按照惯例，doctype大写 （关于html属性，大写还是小写）。
<!DOCTYPE html> <html> ... </html>lang属性
根据HTML5规范：
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；
在sitepoint上可以查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。
<!DOCTYPE html> <html lang="en-us"> ... </html>字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html>IE兼容模式
用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；
如果你想要了解更多，请点击这里；
不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html>引入CSS, JS
根据HTML5规范, 通常在引入CSS和JS时不需要指明type，因为 text/css 和 text/javascript 分别是他们的默认值。
HTML5 规范链接
- 使用link
- 使用style
- 使用script
<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script>属性顺序
属性应该按照特定的顺序出现以保证易读性；
classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altaria-*,rolerequired,readonly,disabled
class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="...">boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
更多内容可以参考 WhatWG section on boolean attributes：
boolean属性的存在表示取值为true，不存在则表示取值为false。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>JS生成标签
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使HTML变得更少。
<!-- Not well --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">实用高于完美
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
CSS, SCSS
缩进
使用soft tab（4个空格）。
.element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; }分号
每个属性声明末尾都要加分号。
.element { width: 20px; height: 20px; background-color: red; }空格
以下几种情况不需要空格：
- 属性名后
- 多个规则的分隔符','前
!important'!'后- 属性值中'('后和')'前
- 行末不要有多余的空格
以下几种情况需要空格：
- 属性值前
- 选择器'>', '+', '~'前后
- '{'前
!important'!'前@else前后- 属性值中的','后
- 注释'/*'后和'*/'前
/* not good */ .element { color :red! important; background-color: rgba(0,0,0,.5); } /* good */ .element { color: red !important; background-color: rgba(0, 0, 0, .5); } /* not good */ .element , .dialog{ ... } /* good */ .element, .dialog { } /* not good */ .element>.dialog{ ... } /* good */ .element > .dialog{ ... } /* not good */ .element{ ... } /* good */ .element { ... } /* not good */ @if{ ... }@else{ ... } /* good */ @if { ... } @else { ... }空行
以下几种情况需要空行：
- 文件最后保留一个空行
- '}'后最好跟一个空行，包括scss中嵌套的规则
- 属性之间需要适当的空行，具体见属性声明顺序
/* not good */ .element { ... } .dialog { color: red; &:after { ... } } /* good */ .element { ... } .dialog { color: red; &:after { ... } }换行
以下几种情况不需要换行：
- '{'前
以下几种情况需要换行：
- '{'后和'}'前
- 每个属性独占一行
- 多个规则的分隔符','后
/* not good */ .element {color: red; background-color: black;} /* good */ .element { color: red; background-color: black; } /* not good */ .element, .dialog { ... } /* good */ .element, .dialog { ... }注释
注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
/* Modal header */ .modal-header { ... } /* * Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ }引号
最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值需要引号。
.element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... }命名
- 类名使用小写字母，以中划线分隔
- id采用驼峰式命名
- scss中的变量、函数、混合、placeholder采用驼峰式命名
/* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ $colorBlack: #000; /* 函数 */ @function pxToRem($px) { ... } /* 混合 */ @mixin centerBlock { ... } /* placeholder */ %myDialog { ... }属性声明顺序
相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。
.declaration-order { display: block; float: right; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; border: 1px solid #e5e5e5; border-radius: 3px; width: 100px; height: 100px; font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; color: #333; background-color: #f5f5f5; opacity: 1; }// 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "font-size-adjust", "font-stretch", "font-effect"