说明
- 版本：1.0.0
- 上次修改时间：2020 年 4 月 29 日
写在前面
- 本文档适用于原生前端代码的风格样式及 Vue 的风格样式，会在内容中做具体的说明
- 部分内容会与 HTML 规范、CSS 规范、JavaScript 规范、Vue 规范等规范有重复部分
- 配套使用开发工具VsCode中的Prettier - Code formatter插件作为工具
- Vue 规范采用开发工具VsCode中的Vetur
插件作为工具 - CSS 命名规范可参考BEM
- 等级分为： - 【强制】：必须遵循的规则，会通过 eslint 和 gitlab 等持续集成方式进行检查和限制 - 【强烈推荐】：有部分代码编辑工具或插件工具来协助完成的标准，如【prettier】【vscode】等 - 【推荐】：更好的协助开发人员写出可读性和可维护性高的代码 - 【建议】：同【推荐】
HTML 代码风格
强制规则
1.使用正确的文档类型【强制】
<!DOCTYPE html>
启用 viewport 模式
<meta name="viewport" content="width=device-width, initial-scale=1">
启用最新渲染模式
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
启用 UTF-8 编码方式
<meta charset="UTF-8">
html 文档使用中文
<html lang="zh-CN">
一个标准的 html 的初始文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2.使用小写元素名【强制】
// bad
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
// bad
<Section>
<p>This is a paragraph.</p>
</SECTION>
// good
<section>
<p>This is a paragraph.</p>
</section>
3.使用小写属性名【强制】
// bad
<div CLASS="menu">
// good
<div class="menu">
4.空行和缩进【强制】
请勿毫无理由地增加空行。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。（如果是 jQuery 为主体依赖的项目则采用四个空格，例如：SGS9.0 之前的客户端站点开发）
请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素
此规则同样适用于 CSS、JavaScript、Vue 脚本等
<!-- bad -->
<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
<!-- 表格示例 good -->
<table>
<tr>
<th>Name</th>
<th>Description</th>
<tr>
<tr>
<td>A</td>
<td>Description of A</td>
<tr>
<tr>
<td>B</td>
<td>Description of B</td>
<tr>
</table>
<!-- 列表示例 good -->
<ol>
<li>LondonA</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
5.对于无需自闭合的标签，必须闭合【强制】
<!-- bad -->
<input type="text" name="title">
<!-- good -->
<input type="text" name="title" />
6.文件扩展名【强制】
HTML 文件名应该使用扩展名 .html（而不是 .htm）
强烈推荐规则
1.必需的属性【强烈推荐】
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
<img src="html5.gif" alt="HTML5" />
2.避免长代码行【强烈推荐】
当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。
请尽量避免代码行超过 80 个字符。(CSS、JavaScript、Vue 脚本同样推荐)
3.标签的使用应尽量简洁，减少不必要的标签【强烈推荐】
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>
<!-- good -->
<img class="avatar" src="image.png">
4.建议不要在标签上直接使用 style 样式【强烈推荐】
<!-- bad -->
<div style="width:300px;height:200px;font-size:14px;"></div>
推荐及建议规则
1.样式表【推荐】
请使用简单的语法来链接样式表（type 属性不是必需的）
<link rel="stylesheet" href="styles.css">
2.在 HTML 中加载 JavaScript【推荐】
请使用简单的语法来加载外部脚本（type 属性不是必需的）
<script src="myscript.js">
CSS/SASS/SCSS 代码风格
强制规则
1.规则默认换行【强制】
/* bad */
p.into {font-family:"Verdana"; font-size:16em;}
/* good */
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
2.每条样式声明后面都加上那个分号【强制】
3.禁止使用 @import 引入 CSS 文件【强制】
4.类名中的字母一律小写，不使用驼峰，只使用字母、数字以及“-”【强制】
驼峰写法或下划线分割单词的写法都存在一个问题，我们的主观无法判断单词的分割。比如yellowgreen这个单词，如果使用分单词的写法可能被写成yellowGreen或yello_green，造成风格不统一
/* bad */
.mapContainer {}
.MAPCONTAINER {}
/* good */
.map-container {}
.map-container1 {}
5.类名使用完整英文单词或抽掉空格的英文词组【强制】
/* bad */
.konnichiwa {} /* 非英文单词会导致大家无法正常阅读 */
.modl {} /* 每个人的缩写未必一致，会造成不统一 */
.hello-world {} /* 类名请只使用一个没有分隔[-_]的词 */
/* good */
.module {}
.helloworld {}
强烈推荐规则
1.大括号与选择器之间留空，冒号后面留空，注释内外前后留空【强烈推荐】
/* 我是注释 */
div { /* 我是注释 */ }
span {
color: red; /* 我是注释 */
}
2.多个选择器使用逗号隔开时写在不同的行，大括号不要另起一行【强烈推荐】
div,
span {
color: red;
font-size: 12px;
}
3.用逗号分隔的多个样式值写成多行【强烈推荐】
.block {
box-shadow: 0 0 0 rgba(#000, 0.1),
1px 1px 0 rgba(#000, 0.2),
2px 2px 0 rgba(#000, 0.3),
3px 3px 0 rgba(#000, 0.4),
4px 4px 0 rgba(#000, 0.5);
}
4.16 进制颜色值中的字母统一小写【强烈推荐】
/* bad */
color: "#FFFFFF";
/* good */
color: "#ffffff";
5.有且仅当有层级关系时使用“-”连接，比如组件内的元素类名采用组件名“-”子类名的形式【强烈推荐】
<div class="uploader">
<input type="text" class="uploader-text" />
<input type="button" class="uploader-button" />
</div>
选择器在 CSS 中应该平行地定义，以便降低优先级，便于覆写
.uploader {}
.uploader-text {}
.uploader-button {}
6.书写顺序【强烈推荐】
定位属性：position display float left top right bottom overflow clear z-index
自身属性：width height margin padding border background
文字样式：font-family font-size font-style font-weight font-varient color
文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
css3 中新增属性：content box-shadow border-radius transform
7.尽量使用缩写属性【强烈推荐】
/* bad */
.list-box {
padding-bottom: 10px;
padding-top: 20px;
padding-left: 30px;
padding-right: 40px;
}
/* good */
.list-box {
padding: 20px 40px 30px 10px;
}
推荐及建议规则
1.避免使用 ID 选择器【推荐】
权重太高，不易维护
2.保持结构灵活性【推荐】
我们的设计应该尽可能地让样式可以用于更多标签
<style>
.section {}
.section-head {}
.section-body {}
</style>
<div class="section">
<div class="section-head"></div>
<div class="section-body"></div>
</div>
<dl class="section">
<dt class="section-head"></dt>
<dd class="section-body"></dd>
</dl>
甚至可以任意调整结构
<style>
.article {}
.article-main {}
.article-title {}
</style>
<div class="article">
<div class="article-main">
<div class="article-title">
<!-- ... -->
</div>
<!-- ... -->
</div>
</div>
<div class="article">
<div class="article-title">
<!-- ... -->
</div>
<div class="article-main">
<!-- ... -->
</div>
</div>
