首发博客地址[1]
系列文章地址[2]
引自《阿里规约》的开头片段：
现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
(一)命名规范
1.1.1 项目命名
全部采用小写方式，以中划线分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem
1.1.2 目录命名
全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。
正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例：script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名。
正例：head-search / page-loading / authorized / notice-icon
反例：HeadSearch / PageLoading
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名。
正例：page-one / shopping-car / user-management
反例：ShoppingCar / UserManagement
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式，以中划线分隔。
正例：render-dom.js / signup.css / index.html / company-logo.png
反例：renderDom.js / UserManagement.html
1.1.4 命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用。
正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
杜绝完全不规范的缩写，避免望文不知义：
反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。
(二)HTML 规范 （Vue Template 同样适用）
1.2.1 HTML 类型
推荐使用 HTML5 的文档类型声明。建议使用 text/html 格式的 HTML，避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限。
- 规定字符编码
- IE 兼容模式
- 规定字符编码
- doctype 大写
正例：
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta charset="UTF-8" /> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company" /> </body> </html>
1.2.2 缩进
缩进使用 2 个空格（一个 tab）。
嵌套的节点应该缩进。
1.2.3 分块注释
在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式：
<!-- 英文 中文 start --> <!-- 英文 中文 end -->
正例：
<body> <header> <div class="container"> <a href="#"> <img src="images/header.jpg" /> </a> </div> </header> </body>
1.2.4 语义化标签
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。
正例：
<header></header> <footer></footer>
反例：
<div></div>
1.2.5 引号
使用双引号(" ") 而不是单引号(' ')。
正例： <div class="news-div"></div>
反例： <div class='news-div'></div>
(三) CSS 规范
1.3.1 命名
- 类名使用小写字母，以中划线分隔。
- id 采用驼峰式命名。
- scss 中的变量、函数、混合、placeholder 采用驼峰式命名。
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。
不推荐：
.fw-800 { font-weight: 800; } .red { color: red; }
推荐：
.heavy { font-weight: 800; } .important { color: red; }
1.3.2 选择器
1)css 选择器中避免使用标签名。从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。
2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器。
不推荐：
.content .title { font-size: 2rem; }
推荐：
.content > .title { font-size: 2rem; }
1.3.3 尽量使用缩写属性
不推荐：
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
推荐：
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
1.3.4 每个选择器及属性独占一行
不推荐：
button{ width:100px;height:50px;color:#fff;background:#00a0e9; }
推荐：
button{ width:100px; height:50px; color:#fff; background:#00a0e9; }
1.3.5 省略 0 后面的单位
不推荐：
div{ padding-bottom: 0px; margin: 0em; }
推荐：
div{ padding-bottom: 0; margin: 0; }
1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式
不推荐：
#header{ padding-bottom: 0px; margin: 0em; }
推荐：
.header{ padding-bottom: 0px; margin: 0em; }
