阿⾥前端规范_阿⾥前端开发规范
前端代码规范
Front Standard Guide
前端 JS 项⽬开发规范
规范的⽬的是为了编写⾼质量的代码，让你的团队成员每天得⼼情都是愉悦的，⼤家在⼀起是快乐的。
引⾃《阿⾥规约》的开头⽚段：
----现代软件架构的复杂性需要协同开发完成，如何⾼效地协同呢？⽆规矩不成⽅圆，⽆规范难以协同，⽐如，制订交通法规表⾯上是要限制⾏车权，实际上是保障公众的⼈⾝安全，试想如果没有限速，没有红绿灯，谁还敢上路⾏驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，⽽是限制过度个性化，以⼀种普遍认可的统⼀⽅式⼀起做事，提升协作效率，降低沟通成本。代码的字⾥⾏间流淌的是软件系统的⾎液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
⼀、编程规约
(⼀)命名规范
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 注释。注释格式
```
1.2.4 语义化标签
HTML5 中新增很多语义化标签，所以优先使⽤语义化标签，避免⼀个页⾯都是 div 或者 p 标签
正例
<header></header>
<footer></footer>
反例
<div>
<p></p>
</div>
1.2.5 引号
使⽤双引号(" ") ⽽不是单引号(’ ') 。
正例： ``
反例： ``
(三) 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;
}
(四) LESS 规范
1.4.1 代码组织
1)将公共less⽂件放置在style/less/common⽂件夹
例:// color.less,common.less
2)按以下顺序组织
1、@import;
2、变量声明;
3、样式声明;
@import "mixins/size.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
1.4.2 避免嵌套层级过多
将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。避免⼤量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20⾏的嵌套规则出现
不推荐：
.main{
.title{
.name{
color:#fff
}
}
}
推荐：
.main-title{
.name{
color:#fff
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论