說(shuō)明
- 版本：1.0.0
- 上次修改時(shí)間：2020 年 4 月 29 日
寫(xiě)在前面
- 本文檔適用于原生前端代碼的風(fēng)格樣式及 Vue 的風(fēng)格樣式揩魂，會(huì)在內(nèi)容中做具體的說(shuō)明
- 部分內(nèi)容會(huì)與 HTML 規(guī)范蘸嘶、CSS 規(guī)范密浑、JavaScript 規(guī)范回梧、Vue 規(guī)范等規(guī)范有重復(fù)部分
- 配套使用開(kāi)發(fā)工具VsCode中的Prettier - Code formatter插件作為工具
- Vue 規(guī)范采用開(kāi)發(fā)工具VsCode中的Vetur
插件作為工具 - CSS 命名規(guī)范可參考BEM
- 等級(jí)分為： - 【強(qiáng)制】：必須遵循的規(guī)則丁溅，會(huì)通過(guò) eslint 和 gitlab 等持續(xù)集成方式進(jìn)行檢查和限制 - 【強(qiáng)烈推薦】：有部分代碼編輯工具或插件工具來(lái)協(xié)助完成的標(biāo)準(zhǔn)快毛，如【prettier】【vscode】等 - 【推薦】：更好的協(xié)助開(kāi)發(fā)人員寫(xiě)出可讀性和可維護(hù)性高的代碼 - 【建議】：同【推薦】
HTML 代碼風(fēng)格
強(qiáng)制規(guī)則
1.使用正確的文檔類型【強(qiáng)制】
<!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">
一個(gè)標(biāo)準(zhǔn)的 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.使用小寫(xiě)元素名【強(qiáng)制】
// 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.使用小寫(xiě)屬性名【強(qiáng)制】
// bad
<div CLASS="menu">
// good
<div class="menu">
4.空行和縮進(jìn)【強(qiáng)制】
請(qǐng)勿毫無(wú)理由地增加空行晤斩。
為了提高可讀性，請(qǐng)?jiān)黾涌招衼?lái)分隔大型或邏輯代碼塊宴霸。
為了提高可讀性囱晴，請(qǐng)?jiān)黾?code>兩個(gè)空格的縮進(jìn)膏蚓。（如果是 jQuery 為主體依賴的項(xiàng)目則采用四個(gè)空格，例如：SGS9.0 之前的客戶端站點(diǎn)開(kāi)發(fā)）
請(qǐng)勿使用沒(méi)有必要的空行和縮進(jìn)畸写。沒(méi)有必要在短的和相關(guān)項(xiàng)目之間使用空行驮瞧，也沒(méi)有必要縮進(jìn)每個(gè)元素
此規(guī)則同樣適用于 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.對(duì)于無(wú)需自閉合的標(biāo)簽剧董，必須閉合【強(qiáng)制】
<!-- bad -->
<input type="text" name="title">
<!-- good -->
<input type="text" name="title" />
6.文件擴(kuò)展名【強(qiáng)制】
HTML 文件名應(yīng)該使用擴(kuò)展名 .html（而不是 .htm）
強(qiáng)烈推薦規(guī)則
1.必需的屬性【強(qiáng)烈推薦】
請(qǐng)始終對(duì)圖像使用 alt 屬性幢尚。當(dāng)圖像無(wú)法顯示時(shí)該屬性很重要破停。
<img src="html5.gif" alt="HTML5" />
2.避免長(zhǎng)代碼行【強(qiáng)烈推薦】
當(dāng)使用 HTML 編輯器時(shí)，通過(guò)左右滾動(dòng)來(lái)閱讀 HTML 代碼很不方便尉剩。
請(qǐng)盡量避免代碼行超過(guò) 80 個(gè)字符真慢。(CSS、JavaScript理茎、Vue 腳本同樣推薦)
3.標(biāo)簽的使用應(yīng)盡量簡(jiǎn)潔黑界，減少不必要的標(biāo)簽【強(qiáng)烈推薦】
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>
<!-- good -->
<img class="avatar" src="image.png">
4.建議不要在標(biāo)簽上直接使用 style 樣式【強(qiáng)烈推薦】
<!-- bad -->
<div style="width:300px;height:200px;font-size:14px;"></div>
推薦及建議規(guī)則
1.樣式表【推薦】
請(qǐng)使用簡(jiǎn)單的語(yǔ)法來(lái)鏈接樣式表（type 屬性不是必需的）
<link rel="stylesheet" href="styles.css">
2.在 HTML 中加載 JavaScript【推薦】
請(qǐng)使用簡(jiǎn)單的語(yǔ)法來(lái)加載外部腳本（type 屬性不是必需的）
<script src="myscript.js">
CSS/SASS/SCSS 代碼風(fēng)格
強(qiáng)制規(guī)則
1.規(guī)則默認(rèn)換行【強(qiáng)制】
/* 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.每條樣式聲明后面都加上那個(gè)分號(hào)【強(qiáng)制】
3.禁止使用 @import 引入 CSS 文件【強(qiáng)制】
4.類名中的字母一律小寫(xiě)，不使用駝峰皂林，只使用字母朗鸠、數(shù)字以及“-”【強(qiáng)制】
駝峰寫(xiě)法或下劃線分割單詞的寫(xiě)法都存在一個(gè)問(wèn)題，我們的主觀無(wú)法判斷單詞的分割础倍。比如yellowgreen這個(gè)單詞烛占，如果使用分單詞的寫(xiě)法可能被寫(xiě)成yellowGreen或yello_green，造成風(fēng)格不統(tǒng)一
/* bad */
.mapContainer {}
.MAPCONTAINER {}
/* good */
.map-container {}
.map-container1 {}
5.類名使用完整英文單詞或抽掉空格的英文詞組【強(qiáng)制】
/* bad */
.konnichiwa {} /* 非英文單詞會(huì)導(dǎo)致大家無(wú)法正常閱讀 */
.modl {} /* 每個(gè)人的縮寫(xiě)未必一致沟启，會(huì)造成不統(tǒng)一 */
.hello-world {} /* 類名請(qǐng)只使用一個(gè)沒(méi)有分隔[-_]的詞 */
/* good */
.module {}
.helloworld {}
強(qiáng)烈推薦規(guī)則
1.大括號(hào)與選擇器之間留空忆家，冒號(hào)后面留空，注釋內(nèi)外前后留空【強(qiáng)烈推薦】
/* 我是注釋 */
div { /* 我是注釋 */ }
span {
color: red; /* 我是注釋 */
}
2.多個(gè)選擇器使用逗號(hào)隔開(kāi)時(shí)寫(xiě)在不同的行德迹，大括號(hào)不要另起一行【強(qiáng)烈推薦】
div,
span {
color: red;
font-size: 12px;
}
3.用逗號(hào)分隔的多個(gè)樣式值寫(xiě)成多行【強(qiáng)烈推薦】
.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 進(jìn)制顏色值中的字母統(tǒng)一小寫(xiě)【強(qiáng)烈推薦】
/* bad */
color: "#FFFFFF";
/* good */
color: "#ffffff";
5.有且僅當(dāng)有層級(jí)關(guān)系時(shí)使用“-”連接芽卿，比如組件內(nèi)的元素類名采用組件名“-”子類名的形式【強(qiáng)烈推薦】
<div class="uploader">
<input type="text" class="uploader-text" />
<input type="button" class="uploader-button" />
</div>
選擇器在 CSS 中應(yīng)該平行地定義，以便降低優(yōu)先級(jí)胳搞，便于覆寫(xiě)
.uploader {}
.uploader-text {}
.uploader-button {}
6.書(shū)寫(xiě)順序【強(qiáng)烈推薦】
定位屬性：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.盡量使用縮寫(xiě)屬性【強(qiáng)烈推薦】
/* bad */
.list-box {
padding-bottom: 10px;
padding-top: 20px;
padding-left: 30px;
padding-right: 40px;
}
/* good */
.list-box {
padding: 20px 40px 30px 10px;
}
推薦及建議規(guī)則
1.避免使用 ID 選擇器【推薦】
權(quán)重太高卸例，不易維護(hù)
2.保持結(jié)構(gòu)靈活性【推薦】
我們的設(shè)計(jì)應(yīng)該盡可能地讓樣式可以用于更多標(biāo)簽
<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>
甚至可以任意調(diào)整結(jié)構(gòu)
<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>
