文章目录
🟢 前端代码规范
规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。
引自《阿里规约》的开头片段:
…现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。代码的字里行间流淌的是软件系统的血液,质量的提升是尽可能少踩坑,杜绝踩重复的坑,切实提升系统稳定性,码出质量。
🟢 一、编码规约
👉1、命名规范
👉1.1、项目命名
全部采用小写方式,以中划线分隔。
- 正例:mall-management-system
- 反例:mall_management-system或mallnanagementSystem
👉1.2、目录命名
全部采用小写方式,以中划线分隔,有复数结构时,要采用复数命名法,缩写不用复数
- 正例:scripts /styles /components /images /utils /layouts /demo-styles / demo-sc/ 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 /Uservanagement
👉1.3、JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式,以中划线分隔
- 正例:render-dom.js/signup.css /index.html /company-1ogo.png
反例:renderDom.js /Uservanagement.html
👉1.4、命名严谨性
代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。说明:正确的英文拼写和语法可以让阅读者易于理解,避免歧义。注意,即使纯拼音命名方式也要避免采用
- 正例:henan/luoyang/rmb 等国际通用的名称,可视网英文。
- 反例:DazhePromotion[打折]/getPingfenByName()[评分]/int某变量=3
杜绝完全不规范的编写,避免望文不知义:- 反例:AbstractClass“缩写"命名成 AbsClass;condition"缩写"命名成 cond,此类随意缩写严重降低了代码的可阅读性。
👉2、HTML规范(Vue Template 同样适用)
👉2.1、 HTML 类型
推荐使用 HTML5 的文档类型申明:(建议使用texthtml格式的 HTML。游免使用 XHTML。XHTML以及它的属性,比如 application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限)
- 规定字符编码
- IE 兼容模式
- 规定字符编码
- doctype 大写
IE 兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>title</title>
</head>
<body>
<noscript>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
👉2.2、缩进
缩进使用2个空格(一个tab)
嵌差的节点应该缩进。
👉2.3、缩进
在每一个块状元素,列表元素和表格元素后,加上一对 HTML注释。注释格式
<!. 英文 中文 start >
<!.. 英文 中文 end >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- header头部 start -->
<header>
<div class="container">
</div>
</header>
<!-- header头部 end -->
</body>
</html>
👉2.4、语义化标签
HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p标签
<header></header>
<footer></footer>
👉2.5、引号
使用双引号(" ")而不是单引号(’ ')。
👉3、CSS规范
👉3.1、命名
- 类名使用小写字母,以中划线分隔
- id 采用驼峰式命名
- scss中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称
不推荐·
.fw-800{
font-weight: 800;
}
.red{
color: red;
}
推荐·
.heavy{
font-weight: 800;
}
.important{
color: red;
}
👉3.2、选择器
- css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看,应该尽量避免css 中出现 HTML标签,并且在 css 选择器中出现标签名会存在潜在的问题。- 很多前端开发人员写选择器链的时候不使用直接子选择器(注:直接子选择器和后代选择器的区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,这是一个非常不好的做法。如果你不写很通用的,需要匹配到 DOM 末端的选择器,你应该总是考虑直接子选择器。
不推荐
.content .title {
font-size: 2em;
}
推荐
.content > .title{
font-size:2em;
}
👉3.3、尽量使用缩写属性
不推荐
border-top-style:none;
font-fami1y: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;
👉3.4、每个选择器及属性独占一行
不推荐:
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推荐:
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
👉3.5、省略0后面的单位
不推荐:
div{
padding-bottom: 0px;
margin: 0em;
}
推荐:
div{
padding-bottom: 0;
margin: 0;
}
👉3.6、避免使用ID选择器及全局标签选择器防止污染全局样式
该用的时候还是要用,只是避免滥用
不推荐:
#header{
padding-bottom: 0px;
margin: 0em;
}
推荐:
.header{
padding-bottom: 0;
margin: 0;
}
👉4、LESS规范
👉4.1、代码组织
- 将公共less文件放置在style/less/common文件夹
例:// color.less,common.less- 按以下顺序组织
- @import;
- 变量声明;
- 样式声明;
@import "mixins/size.1ess":
@default-text-color:8333:
.page {
width: 960px;
margin: 0 auto;
}
👉4.2、避免嵌套层级过多
将嵌套深度限制在3级。对于超过4级的嵌套,给予重新评估。这可以避免出现过于详实的CSS选择器。避免大量的嵌套规则。当可读性受到影响时,将之打断。推荐避免出现多于20行的嵌套规则出现
不推荐
.main{
.title{
.name{
color:#fff;
}
}
}
推荐
.main{
.name{
color:#fff;
}
}
✒️总结
如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见