3、標(biāo)簽屬性順序
屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是為高可復(fù)用組件設(shè)計(jì)的，所以應(yīng)處在第一位；
id更加具體且應(yīng)該盡量少使用，所以將它放在第二位
4、boolean屬性
boolean屬性指不需要聲明取值的屬性，XHTML需要每個(gè)屬性聲明取值，但是HTML5并不需要；
boolean屬性的存在表示取值為true，不存在則表示取值為false。
2.4 雜項(xiàng)
1、所有標(biāo)簽必須采用合理嵌套。
// 禁止// 推薦
// 禁止inline級(jí)標(biāo)簽嵌套block級(jí)標(biāo)簽
2、img標(biāo)簽中必須添加alt屬性。如：
3、減少標(biāo)簽數(shù)量
在編寫(xiě)HTML代碼時(shí)，需要盡量避免多余的父節(jié)點(diǎn)；
很多時(shí)候，需要通過(guò)迭代和重構(gòu)來(lái)使HTML變得更少。
三、 CSS代碼規(guī)范 3.1 CSS引用規(guī)范
1、所有CSS均為外部調(diào)用，不得在頁(yè)面書(shū)寫(xiě)任何內(nèi)部樣式或行內(nèi)樣式；
2、html頁(yè)面引入樣式文件：
統(tǒng)一使用link標(biāo)簽，少用@import（原生import有加載性能問(wèn)題），sass、less、vue.js等文件使用import命令除外（因?yàn)樽罱K前端構(gòu)建工具會(huì)將引入文件編譯成一個(gè)css文件）。
3.2 CSS注釋規(guī)范
1、css頭部文檔注釋( 統(tǒng)一加上@charset聲明 )，如下：
@charset "utf-8"; /** * @created : 2017/09/15 * @author : Mr.Wang * @version : v1.0 * @desc : XX模塊 **/
關(guān)于"version"，如果對(duì)代碼有修改更新version版本號(hào)，并添加相關(guān)注釋。
2、內(nèi)部模塊之間注釋?zhuān)ńㄗh @模塊英文名，好查找）：
/* @info 商品信息區(qū) -----------------------------------------------------------*/
.infoArea{}
/* 單行注釋 */
.specArea{}
/* @price 商品價(jià)格區(qū) ----------------------------------------------------------*/
.price{}
3.3 CSS字符規(guī)范
1、縮進(jìn)：使用soft tab（2個(gè)空格）；
2、分號(hào)：每個(gè)屬性聲明末尾都要加分號(hào)；
3、空行:
以下幾種情況需要空行
/**
* 文件最后保留一個(gè)空行
* "}"后最好跟一個(gè)空行，包括scss中嵌套的規(guī)則
* 屬性之間需要適當(dāng)?shù)目招校唧w見(jiàn)屬性聲明順序
**/
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
4、空格
| 以下幾種情況不需要空格 | 以下幾種情況需要空格 |
|---|---|
| 屬性名后 | 屬性值前 |
| 多個(gè)規(guī)則的分隔符","前 | 選擇器">", "+", "~"前后 |
| !important "!"后 | "{"前 |
| 屬性值中"("后和")"前 | !important "!"前 |
| 行末不要有多余的空格 | 屬性值中的","后 |
| 注釋"/*"后和"*/"前 | |
/* 示例代碼 */
.element,
.dialog {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
5、引號(hào)
最外層統(tǒng)一使用雙引號(hào)；
url的內(nèi)容要用引號(hào)；
屬性選擇器中的屬性值需要引號(hào)。
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
3.4 樣式中屬性
1、排序規(guī)則：先外部 > 再自身 > 后內(nèi)部
推薦工具CSScomb，sublime 和 vscode 均有對(duì)應(yīng)插件
A. 影響文檔流的屬性（display, position, float, clear, visibility, table-layout等） B. 自身盒模型的屬性（width, height, margin, padding, border等） C. 排版相關(guān)屬性（font, line-height, text-align, text-indent, vertical-align等） D. 裝飾性屬性（color, background, opacity, cursor等） E. 生成內(nèi)容的屬性（content, list-style, quotes等）
2、屬性簡(jiǎn)寫(xiě)
屬性簡(jiǎn)寫(xiě)需要你非常清楚屬性值的正確順序，而且在大多數(shù)情況下并不需要設(shè)置屬性簡(jiǎn)寫(xiě)中包含的所有值，所以建議盡量分開(kāi)聲明會(huì)更加清晰；
margin 和 padding 相反，需要使用簡(jiǎn)寫(xiě)；
常見(jiàn)的屬性簡(jiǎn)寫(xiě)包括：font background transition animation
/* not good */
.element {
transition: opacity 1s linear 2s;
}
/* good */
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}
3.5 雜項(xiàng)
1、不允許有空的規(guī)則；
2、元素選擇器用小寫(xiě)字母；
3、去掉小數(shù)點(diǎn)前面的0；
4、去掉數(shù)字中不必要的小數(shù)點(diǎn)和末尾的0；
5、屬性值"0"后面不要加單位；
6、同個(gè)屬性不同前綴的寫(xiě)法需要在垂直方向保持對(duì)齊，具體參照右邊的寫(xiě)法；
7、無(wú)前綴的標(biāo)準(zhǔn)屬性應(yīng)該寫(xiě)在有前綴的屬性后面；
8、不要在同個(gè)規(guī)則里出現(xiàn)重復(fù)的屬性，如果重復(fù)的屬性是連續(xù)的則沒(méi)關(guān)系；
9、不要在一個(gè)文件里出現(xiàn)兩個(gè)相同的規(guī)則；
10、用 border: 0; 代替 border: none;；
11、選擇器不要超過(guò)4層（在scss中如果超過(guò)4層應(yīng)該考慮用嵌套的方式來(lái)寫(xiě)）；
12、發(fā)布的代碼中不要有 @import；
13、盡量少用"*"選擇器。
三、 JavaScript規(guī)范（jslint/eslint） 3.1 JS文件引用1、引入格式：
腳本語(yǔ)言發(fā)展至今，也只有js混的最好了，所以type="text/javascript"類(lèi)型指定可以省去。
2、引入位置： body標(biāo)簽內(nèi)最后部（非body外面）, 減少因載入腳本而造成其他頁(yè)面內(nèi)容阻塞的問(wèn)題（js單線程）。
頁(yè)面內(nèi)容….
3、引入方式：html頁(yè)面中禁止直接編寫(xiě)js代碼，統(tǒng)一使用