公眾號(hào)：IT小贊
期待你的關(guān)注，IT世界，我們一起努力共同成長(zhǎng)！不定時(shí)干貨滿(mǎn)足優(yōu)秀的你！

1.概述

歡迎使用品優(yōu)購(gòu)代碼規(guī)范，這個(gè)是我借鑒京東前端代碼規(guī)范，組織的品優(yōu)購(gòu)內(nèi)部規(guī)范。旨在增強(qiáng)團(tuán)隊(duì)開(kāi)發(fā)協(xié)作、提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼規(guī)范，

以下規(guī)范是團(tuán)隊(duì)基本約定的內(nèi)容，必須嚴(yán)格遵循。

HTML規(guī)范

基于 W3C、蘋(píng)果開(kāi)發(fā)者等官方文檔，并結(jié)合團(tuán)隊(duì)業(yè)務(wù)和開(kāi)發(fā)過(guò)程中總結(jié)的規(guī)范約定，讓頁(yè)面HTML代碼更具語(yǔ)義性。

圖片規(guī)范

了解各種圖片格式特性，根據(jù)特性制定圖片規(guī)范，包括但不限于圖片的質(zhì)量約定、圖片引入方式、圖片合并處理等，旨在從圖片層面優(yōu)化頁(yè)面性能。

CSS規(guī)范

統(tǒng)一規(guī)范團(tuán)隊(duì) CSS 代碼書(shū)寫(xiě)風(fēng)格和使用 CSS 預(yù)編譯語(yǔ)言語(yǔ)法風(fēng)格，提供常用媒體查詢(xún)語(yǔ)句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。

命名規(guī)范

從 目錄、圖片、HTML/CSS文件、ClassName 的命名等層面約定規(guī)范團(tuán)隊(duì)的命名習(xí)慣，增強(qiáng)團(tuán)隊(duì)代碼的可讀性。

2. HTML 規(guī)范

DOCTYPE 聲明

HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：

HTML5標(biāo)準(zhǔn)模版

頁(yè)面語(yǔ)言lang

推薦使用屬性值 cmn-Hans-CN（簡(jiǎn)體, 中國(guó)大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值

更多地區(qū)語(yǔ)言參考：

charset 字符集合

一般情況下統(tǒng)一使用 “UTF-8” 編碼

由于歷史原因，有些業(yè)務(wù)可能會(huì)使用 “GBK” 編碼

請(qǐng)盡量統(tǒng)一寫(xiě)成標(biāo)準(zhǔn)的 “UTF-8”，不要寫(xiě)成 “utf-8” 或 “utf8” 或 “UTF8”。根據(jù) IETF對(duì)UTF-8的定義，其編碼標(biāo)準(zhǔn)的寫(xiě)法是 “UTF-8”；而 UTF8 或 utf8 的寫(xiě)法只是出現(xiàn)在某些編程系統(tǒng)中，如 .NET framework 的類(lèi) System.Text.Encoding 中的一個(gè)屬性名就叫 UTF8。

書(shū)寫(xiě)風(fēng)格

HTML代碼大小寫(xiě)

HTML標(biāo)簽名、類(lèi)名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫(xiě)

推薦：

不推薦：

類(lèi)型屬性

不需要為 CSS、JS 指定類(lèi)型屬性，HTML5 中默認(rèn)已包含

推薦：

不推薦：

元素屬性

元素屬性值使用雙引號(hào)語(yǔ)法
元素屬性值可以寫(xiě)上的都寫(xiě)上

推薦：

不推薦：

特殊字符引用

文本可以和字符引用混合出現(xiàn)。這種方法可以用來(lái)轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。

在 HTML 中不能使用小于號(hào) “<” 和大于號(hào) “>”特殊字符，瀏覽器會(huì)將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實(shí)體

推薦：

不推薦：

代碼縮進(jìn)

統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

代碼嵌套

元素嵌套規(guī)范，每個(gè)塊狀元素獨(dú)立一行，內(nèi)聯(lián)元素可選

推薦：

不推薦：

段落元素與標(biāo)題元素只能嵌套內(nèi)聯(lián)元素

推薦：

不推薦：

3. 圖片規(guī)范

內(nèi)容圖

內(nèi)容圖多以商品圖等照片類(lèi)圖片形式存在，顏色較為豐富，文件體積較大

優(yōu)先考慮 JPEG 格式，條件允許的話(huà)優(yōu)先考慮 WebP 格式
盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大
PC平臺(tái)單張的圖片的大小不應(yīng)大于 200KB。

背景圖

背景圖多為圖標(biāo)等顏色比較簡(jiǎn)單、文件體積不大、起修飾作用的圖片

PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率
圖像顏色比較簡(jiǎn)單的，如純色塊線(xiàn)條圖標(biāo)，優(yōu)先考慮使用 PNG8 格式，避免不使用 JPEG 格式
圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式
圖像顏色豐富而且文件比較大的（40KB - 200KB）優(yōu)先考慮 JPEG 格式
條件允許的，優(yōu)先考慮 WebP 代替 PNG 和 JPEG 格式

4. CSS規(guī)范

代碼格式化

樣式書(shū)寫(xiě)一般有兩種：一種是緊湊格式 (Compact)

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n145" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc{ display: block;width: 50px;}</pre>

一種是展開(kāi)格式（Expanded）

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n148" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
display: block;
width: 50px;
}</pre>

團(tuán)隊(duì)約定

統(tǒng)一使用展開(kāi)格式書(shū)寫(xiě)樣式

代碼大小寫(xiě)

樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫(xiě)字母書(shū)寫(xiě)，屬性字符串允許使用大小寫(xiě)。

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n156" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
/* 推薦 */
.jdc{
display:block;
}

/* 不推薦 */
.JDC{
DISPLAY:BLOCK;
}</pre>

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n168" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
/* 推薦 /
.jdc {}
.jdc li {}
.jdc li p{}
?
/ 不推薦 */
*{}

jdc {}

.jdc div{}</pre>

代碼縮進(jìn)

統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n172" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
width: 100%;
height: 100%;
}</pre>

分號(hào)

每個(gè)屬性聲明末尾都要加分號(hào)；

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n176" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
width: 100%;
height: 100%;
}</pre>

代碼易讀性

左括號(hào)與類(lèi)名之間一個(gè)空格，冒號(hào)與屬性值之間一個(gè)空格

推薦：

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n182" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
width: 100%;
}</pre>

不推薦：

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n185" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc{
width:100%;
}</pre>

逗號(hào)分隔的取值，逗號(hào)之后一個(gè)空格

推薦：

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n190" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}</pre>

不推薦：

<pre class="md-fences md-end-block" lang="" contenteditable="false" cid="n193" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}</pre>

為單個(gè)css選擇器或新申明開(kāi)啟新行

推薦：

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n198" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}</pre>

不推薦：

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n201" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}</pre>

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

<pre class="md-fences mock-cm md-end-block" lang="" contenteditable="false" cid="n206" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre-wrap; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">.jdc {
color: rgba(255,255,255,.5);
}

</pre>

不推薦：

<pre class="md-fences mock-cm md-end-block" lang="" contenteditable="false" cid="n209" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre-wrap; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">.jdc {
color: rgba( 255, 255, 255, 0.5 );
}

</pre>

屬性值十六進(jìn)制數(shù)值能用簡(jiǎn)寫(xiě)的盡量用簡(jiǎn)寫(xiě)

推薦：

<pre class="md-fences mock-cm md-end-block" lang="" contenteditable="false" cid="n214" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre-wrap; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">.jdc {
color: #fff;
}

</pre>

不推薦：

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n217" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
color: #ffffff;
}</pre>

不要為 0 指明單位

推薦：

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n222" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
margin: 0 10px;
}</pre>

不推薦：

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n225" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
margin: 0px 10px;
}</pre>

屬性值引號(hào)

css屬性值需要用到引號(hào)時(shí)，統(tǒng)一使用單引號(hào)

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n229" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
/* 推薦 /
.jdc {
font-family: 'Hiragino Sans GB';
}
?
/ 不推薦 */
.jdc {
font-family: "Hiragino Sans GB";
}</pre>

屬性書(shū)寫(xiě)順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫(xiě)，畢竟關(guān)系到模式）
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

<pre class="md-fences md-end-block" lang="css" contenteditable="false" cid="n246" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}</pre>

mozilla官方屬性順序推薦

命名規(guī)范

由歷史原因及個(gè)人習(xí)慣引起的 DOM 結(jié)構(gòu)、命名不統(tǒng)一，導(dǎo)致不同成員在維護(hù)同一頁(yè)面時(shí)，效率低下，迭代、維護(hù)成本極高。

目錄命名

項(xiàng)目文件夾：shoping
樣式文件夾：css
腳本文件夾：js
樣式類(lèi)圖片文件夾：img
產(chǎn)品類(lèi)圖片文件夾： upload
字體類(lèi)文件夾： fonts

ClassName命名

ClassName的命名應(yīng)該盡量精短、明確，必須以字母開(kāi)頭命名，且全部字母為小寫(xiě)，單詞之間統(tǒng)一使用下劃線(xiàn) “_” 連接

.nav_top

常用命名推薦

注意：ad、banner、gg、guanggao 等有機(jī)會(huì)和廣告掛勾的不建議直接用來(lái)做ClassName，因?yàn)橛行g覽器插件（Chrome的廣告攔截插件等）會(huì)直接過(guò)濾這些類(lèi)名，因此

</pre>

這種廣告的英文或拼音類(lèi)名不應(yīng)該出現(xiàn)

另外，敏感不和諧字眼也不應(yīng)該出現(xiàn)，如：

<pre class="md-fences mock-cm md-end-block" lang="" contenteditable="false" cid="n285" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre-wrap; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...

</pre>

ClassName	含義
about	關(guān)于
account	賬戶(hù)
arrow	箭頭圖標(biāo)
article	文章
aside	邊欄
audio	音頻
avatar	頭像
bg,background	背景
bar	欄（工具類(lèi)）
branding	品牌化
crumb,breadcrumbs	面包屑
btn,button	按鈕
caption	標(biāo)題，說(shuō)明
category	分類(lèi)
chart	圖表
clearfix	清除浮動(dòng)
close	關(guān)閉
col,column	列
comment	評(píng)論
community	社區(qū)
container	容器
content	內(nèi)容
copyright	版權(quán)
current	當(dāng)前態(tài)，選中態(tài)
default	默認(rèn)
description	描述
details	細(xì)節(jié)
disabled	不可用
entry	文章，博文
error	錯(cuò)誤
even	偶數(shù)，常用于多行列表或表格中
fail	失敗（提示）
feature	專(zhuān)題
fewer	收起
field	用于表單的輸入?yún)^(qū)域
figure	圖
filter	篩選
first	第一個(gè)，常用于列表中
footer	頁(yè)腳
forum	論壇
gallery	畫(huà)廊
group	模塊，清除浮動(dòng)
header	頁(yè)頭
help	幫助
hide	隱藏
hightlight	高亮
home	主頁(yè)
icon	圖標(biāo)
info,information	信息
last	最后一個(gè)，常用于列表中
links	鏈接
login	登錄
logout	退出
logo	標(biāo)志
main	主體
menu	菜單
meta	作者、更新時(shí)間等信息欄，一般位于標(biāo)題之下
module	模塊
more	更多（展開(kāi)）
msg,message	消息
nav,navigation	導(dǎo)航
next	下一頁(yè)
nub	小塊
odd	奇數(shù)，常用于多行列表或表格中
off	鼠標(biāo)離開(kāi)
on	鼠標(biāo)移過(guò)
output	輸出
pagination	分頁(yè)
pop,popup	彈窗
preview	預(yù)覽
previous	上一頁(yè)
primary	主要
progress	進(jìn)度條
promotion	促銷(xiāo)
rcommd,recommendations	推薦
reg,register	注冊(cè)
save	保存
search	搜索
secondary	次要
section	區(qū)塊
selected	已選
share	分享
show	顯示
sidebar	邊欄，側(cè)欄
slide	幻燈片，圖片切換
sort	排序
sub	次級(jí)的，子級(jí)的
submit	提交
subscribe	訂閱
subtitle	副標(biāo)題
success	成功（提示）
summary	摘要
tab	標(biāo)簽頁(yè)
table	表格
txt,text	文本
thumbnail	縮略圖
time	時(shí)間
tips	提示
title	標(biāo)題
video	視頻
wrap	容器，包，一般用于最外層
wrapper	容器，包，一般用于最外層

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

狙擊月亮的IT贊

1.概述

HTML規(guī)范

圖片規(guī)范

CSS規(guī)范

命名規(guī)范

2. HTML 規(guī)范

DOCTYPE 聲明

頁(yè)面語(yǔ)言lang

charset 字符集合

書(shū)寫(xiě)風(fēng)格

HTML代碼大小寫(xiě)

類(lèi)型屬性

元素屬性

特殊字符引用

代碼縮進(jìn)

代碼嵌套

3. 圖片規(guī)范

內(nèi)容圖

背景圖

4. CSS規(guī)范

代碼格式化

代碼大小寫(xiě)

選擇器

jdc {}

代碼縮進(jìn)

分號(hào)

代碼易讀性

屬性值引號(hào)

屬性書(shū)寫(xiě)順序

命名規(guī)范

目錄命名

ClassName命名

常用命名推薦

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

1.概述

HTML規(guī)范

圖片規(guī)范

CSS規(guī)范

命名規(guī)范

2. HTML 規(guī)范

DOCTYPE 聲明

頁(yè)面語(yǔ)言lang

charset 字符集合

書(shū)寫(xiě)風(fēng)格

HTML代碼大小寫(xiě)

類(lèi)型屬性

元素屬性

特殊字符引用

代碼縮進(jìn)

代碼嵌套

3. 圖片規(guī)范

內(nèi)容圖

背景圖

4. CSS規(guī)范

代碼格式化

代碼大小寫(xiě)

選擇器

jdc {}

代碼縮進(jìn)

分號(hào)

代碼易讀性

屬性值引號(hào)

屬性書(shū)寫(xiě)順序

命名規(guī)范

目錄命名

ClassName命名

常用命名推薦

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av