本文详细介绍了前端代码规范，包括HTML、CSS和JavaScript的命名、HTML类型、CSS选择器使用、JS命名约定等，旨在提高代码可读性和团队协作效率。
文章目录
前端代码规范
一、html-css-js篇
1.1 命名规范
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
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式，以中划线分隔。
1.1.4 命名严谨性
代码中的命名严谨使用拼音与英文混合的方式，更不允许直接使用中文的方式。即使纯拼音命名方式也要避免使用。
杜绝完全不规范的缩写，避免望文不知义
反例：AbstractClass 缩写 命名成AbsClass； condition 缩写 命名成 condi，此类随意缩写严重降低代码的可阅读性。
1.2 HTML 规范 （Vue Template 同样适用）
1.2.1 HTML 类型
使用HTML5的文档类型说明：
-
规定字符编码
-
IE 兼容模式
-
doctype大写
正例：
<!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> </body> </html>1.2.2 缩进
缩进使用两个空格 （一个tab）
嵌套的节点应该缩进
1.2.3 分块注释
在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释，注释格式
正例：
<body> <!-- header 头部 start --> <header> </header> <!-- header 头部 end --> </body>1.2.4 语义化标签
正确的标签做正确的事 / 合适的标签做合适的事
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
正例
<header></header> <footer></footer> 反例
<div> <p></p> </div>1.2.5 引号
使用双引号，不用单引号
1.3 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选择器中避免使用标签名 2. 使用直接子选择器不推荐：
.content .title { font-size: 2rem; }推荐：
.content > .title { font-size: 2rem; }1.3.3 尽量使用缩写属性
不推荐：
padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;推荐：
padding: 0 1em 2em;1.3.4 每个选择器及属性独占一行
不推荐：
button{ width:100px;height:500px;colo:#ffffff;background:aqua; }推荐：
button{ width:100px; height:500px; colo:#ffffff; background:aqua; }
1.3.5 省略0后面的单位
不推荐：
div{
padding-top: 0px;
margin: 0em;
}
推荐：
div{
padding-top: 0;
margin: 0;
}
1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式
不推荐：
#header{
padding-bottom: 0;
margin: 0;
}
推荐：
.header{
padding-bottom: 0;
margin: 0;
}
1.4 LESS 规范
1.4.1 代码组织
1. 将公共less文件放置在style/less/common文件夹
2. 按以下顺序组织
1. @import
2. 变量声明
3. 样式声明
@import "mixins/size.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
1.4.2 避免嵌套层级过多
将嵌套深度限制在3级。
不推荐：
.main {
.title {
.name {
color:#fff
}
}
}
推荐：
.main-title{
.name{
color: #fff
}
}
1.5 JavaScript 规范
1.5.1 命名
-
采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线开始，也不能以下划线或美元符号结束
反例：
_name / name_ / name$- 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
正例：
localValue / getHttpMessage() / inputUserId其中 method 方法命名必须是 动词 或者 动词+名词 形式
正例：
saveShopCarDate / openShopInfoDialog反例：
save / open / show / go特此说明，增删查改，详情统一使用如5个单词，不得使用其他 （目的是为了统一各个端）
add / update / delete / detail / get- 常量名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
正例：
MAX_STOCK_COUNT反例：
MAX_COUNT
1.5.2 代码格式
1)使用两个空格进行缩进
正例：
if (x < y) {
x += 10;
} else {
x += 1;
}
2）不同逻辑、不用语义、不同业务的代码之间插入一个空行分隔开来提升可读性
说明：任何情形，没有必要插入多个空行进行隔开。
1.5.3 字符串
统一使用单引号（‘），不使用双引号（“）。这在创建HTML字符串非常有好处：
正例：
let ser = 'foo';
let testDiv = '<div id="test"></div>';
反例：
let str = 'foo';
let testDiv = "<div id='test'></div>"
1.5.4 对象声明
1）使用字面量创建对象
正例： let user = {};
反例： let user = new Object();
2) 使用字面量来代替对象构造器
正例：
var user = {
age:0,
name:1,
city:3
};
反例：
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;
1.5.5 使用ES6，7
必须优先使用 ES6，7中新增的语法糖和函数。简化程序，并让代码更加灵活和可复用。
必须强制使用 ES6、ES7 的新语法，比如箭头函数、await/async，解构，let，for…of 等等
1.5.6 括号
下列关键字必须有大括号 （即使代码块的内容就只有一行）：if，else，for，while，do，switch，try，catch，finally，with。
正例：
if (condition) {
doSomething();
}
反例：
if (condition) doSomething();
1.5.7 undefined 判断
永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串 ‘undefined’ 对变量进行判断。
正例：
if (typeof person === 'undefined') {
...
}
反例：
if (person === undefined) {
...
}
1.5.8 条件判断和循环最多三层
条件判断能使用三目运算符和逻辑运算符的，就不要使用条件判断，但是谨记不要写的太长的三目运算符。如果超过 3 层请抽成函数，并写明注释。
1.5.9 this的转换名
对上下文 this 的引用只能使用 ’self‘ 来命名
1.5.10 慎用console.log
因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
