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

1.概述

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

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

HTML規(guī)范

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

圖片規(guī)范

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

CSS規(guī)范

統(tǒng)一規(guī)范團(tuán)隊(duì) CSS 代碼書寫風(fēng)格和使用 CSS 預(yù)編譯語言語法風(fēng)格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業(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)模版

頁面語言lang

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

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

charset 字符集合

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

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

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

書寫風(fēng)格

HTML代碼大小寫

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

推薦：

不推薦：

類型屬性

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

推薦：

不推薦：

元素屬性

元素屬性值使用雙引號語法
元素屬性值可以寫上的都寫上

推薦：

不推薦：

特殊字符引用

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

在 HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標(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)容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大

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

背景圖

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

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

4. CSS規(guī)范

代碼格式化

樣式書寫一般有兩種：一種是緊湊格式 (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>

一種是展開格式（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)一使用展開格式書寫樣式

代碼大小寫

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

<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 選擇器
不使用無具體語義定義的標(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>

分號

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

<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>

代碼易讀性

左括號與類名之間一個(gè)空格，冒號與屬性值之間一個(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>

逗號分隔的取值，逗號之后一個(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選擇器或新申明開啟新行

推薦：

<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ù)值能用簡寫的盡量用簡寫

推薦：

<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>

屬性值引號

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

<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>

屬性書寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫，畢竟關(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ù)同一頁面時(shí)，效率低下，迭代、維護(hù)成本極高。

目錄命名

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

ClassName命名

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

.nav_top

常用命名推薦

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

</pre>

這種廣告的英文或拼音類名不應(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	賬戶
arrow	箭頭圖標(biāo)
article	文章
aside	邊欄
audio	音頻
avatar	頭像
bg,background	背景
bar	欄（工具類）
branding	品牌化
crumb,breadcrumbs	面包屑
btn,button	按鈕
caption	標(biāo)題，說明
category	分類
chart	圖表
clearfix	清除浮動
close	關(guān)閉
col,column	列
comment	評論
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	專題
fewer	收起
field	用于表單的輸入?yún)^(qū)域
figure	圖
filter	篩選
first	第一個(gè)，常用于列表中
footer	頁腳
forum	論壇
gallery	畫廊
group	模塊，清除浮動
header	頁頭
help	幫助
hide	隱藏
hightlight	高亮
home	主頁
icon	圖標(biāo)
info,information	信息
last	最后一個(gè)，常用于列表中
links	鏈接
login	登錄
logout	退出
logo	標(biāo)志
main	主體
menu	菜單
meta	作者、更新時(shí)間等信息欄，一般位于標(biāo)題之下
module	模塊
more	更多（展開）
msg,message	消息
nav,navigation	導(dǎo)航
next	下一頁
nub	小塊
odd	奇數(shù)，常用于多行列表或表格中
off	鼠標(biāo)離開
on	鼠標(biāo)移過
output	輸出
pagination	分頁
pop,popup	彈窗
preview	預(yù)覽
previous	上一頁
primary	主要
progress	進(jìn)度條
promotion	促銷
rcommd,recommendations	推薦
reg,register	注冊
save	保存
search	搜索
secondary	次要
section	區(qū)塊
selected	已選
share	分享
show	顯示
sidebar	邊欄，側(cè)欄
slide	幻燈片，圖片切換
sort	排序
sub	次級的，子級的
submit	提交
subscribe	訂閱
subtitle	副標(biāo)題
success	成功（提示）
summary	摘要
tab	標(biāo)簽頁
table	表格
txt,text	文本
thumbnail	縮略圖
time	時(shí)間
tips	提示
title	標(biāo)題
video	視頻
wrap	容器，包，一般用于最外層
wrapper	容器，包，一般用于最外層

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

web項(xiàng)目的代碼規(guī)范(適合小白！建議收藏！）

web項(xiàng)目的代碼規(guī)范(適合小白！建議收藏！）

1.概述

HTML規(guī)范

圖片規(guī)范

CSS規(guī)范

命名規(guī)范

2. HTML 規(guī)范

DOCTYPE 聲明

頁面語言lang

charset 字符集合

書寫風(fēng)格

HTML代碼大小寫

類型屬性

元素屬性

特殊字符引用

代碼縮進(jìn)

代碼嵌套

3. 圖片規(guī)范

內(nèi)容圖

背景圖

4. CSS規(guī)范

代碼格式化

代碼大小寫

選擇器

jdc {}

代碼縮進(jìn)

分號

代碼易讀性

屬性值引號

屬性書寫順序

命名規(guī)范

目錄命名

ClassName命名

常用命名推薦

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

web項(xiàng)目的代碼規(guī)范(適合小白！建議收藏！）

1.概述

HTML規(guī)范

圖片規(guī)范

CSS規(guī)范

命名規(guī)范

2. HTML 規(guī)范

DOCTYPE 聲明

頁面語言lang

charset 字符集合

書寫風(fēng)格

HTML代碼大小寫

類型屬性

元素屬性

特殊字符引用

代碼縮進(jìn)

代碼嵌套

3. 圖片規(guī)范

內(nèi)容圖

背景圖

4. CSS規(guī)范

代碼格式化

代碼大小寫

選擇器

jdc {}

代碼縮進(jìn)

分號

代碼易讀性

屬性值引號

屬性書寫順序

命名規(guī)范

目錄命名

ClassName命名

常用命名推薦

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频