一、概述
歡迎使用品優(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、蘋果開(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ū)寫風(fēng)格和使用 CSS 預(yù)編譯語(yǔ)言語(yǔ)法風(fēng)格，提供常用媒體查詢語(yǔ)句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。
命名規(guī)范
從 目錄、圖片、HTML/CSS文件、ClassName 的命名等層面約定規(guī)范團(tuán)隊(duì)的命名習(xí)慣，增強(qiáng)團(tuán)隊(duì)代碼的可讀性。
二、HTML 規(guī)范
DOCTYPE 聲明
HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：
<!DOCTYPE html>
HTML5標(biāo)準(zhǔn)模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5標(biāo)準(zhǔn)模版</title>
</head>
<body>
</body>
</html>
頁(yè)面語(yǔ)言lang
推薦使用屬性值 cmn-Hans-CN（簡(jiǎn)體, 中國(guó)大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
更多地區(qū)語(yǔ)言參考：
zh-SG 中文 (簡(jiǎn)體, 新加坡) 對(duì)應(yīng) cmn-Hans-SG 普通話 (簡(jiǎn)體, 新加坡)
zh-HK 中文 (繁體, 香港) 對(duì)應(yīng) cmn-Hant-HK 普通話 (繁體, 香港)
zh-MO 中文 (繁體, 澳門) 對(duì)應(yīng) cmn-Hant-MO 普通話 (繁體, 澳門)
zh-TW 中文 (繁體, 臺(tái)灣) 對(duì)應(yīng) cmn-Hant-TW 普通話 (繁體, 臺(tái)灣)
charset 字符集合
一般情況下統(tǒng)一使用 “UTF-8” 編碼
<meta charset="UTF-8">
由于歷史原因，有些業(yè)務(wù)可能會(huì)使用 “GBK” 編碼
<meta charset="GBK">
請(qǐng)盡量統(tǒng)一寫成標(biāo)準(zhǔn)的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據(jù) IETF對(duì)UTF-8的定義，其編碼標(biāo)準(zhǔn)的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法只是出現(xiàn)在某些編程系統(tǒng)中，如 .NET framework 的類 System.Text.Encoding 中的一個(gè)屬性名就叫 UTF8。
書(shū)寫風(fēng)格
HTML代碼大小寫
HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫
推薦：
<div class="demo"></div>
不推薦：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
類型屬性
不需要為 CSS、JS 指定類型屬性，HTML5 中默認(rèn)已包含
推薦：
<link rel="stylesheet" href="" >
<script src=""></script>
不推薦：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
元素屬性
- 元素屬性值使用雙引號(hào)語(yǔ)法
- 元素屬性值可以寫上的都寫上
推薦：
<input type="text">
<input type="radio" name="name" checked="checked" >
不推薦：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出現(xiàn)。這種方法可以用來(lái)轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。
在 HTML 中不能使用小于號(hào) “<” 和大于號(hào) “>”特殊字符，瀏覽器會(huì)將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實(shí)體
推薦：
<a href="#">more>></a>
不推薦：
<a href="#">more>></a>
代碼縮進(jìn)
統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
<div class="jdc">
<a href="#"></a>
</div>
代碼嵌套
元素嵌套規(guī)范，每個(gè)塊狀元素獨(dú)立一行，內(nèi)聯(lián)元素可選
推薦：
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
不推薦：
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素與標(biāo)題元素只能嵌套內(nèi)聯(lián)元素
推薦：
<h1><span></span></h1>
<p><span></span><span></span></p>
不推薦：
<h1><div></div></h1>
<p><div></div><div></div></p>
三、圖片規(guī)范
內(nèi)容圖
內(nèi)容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大
- 優(yōu)先考慮 JPEG 格式，條件允許的話優(yōu)先考慮 WebP 格式
- 盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大
- PC平臺(tái)單張的圖片的大小不應(yīng)大于 200KB。
背景圖
背景圖多為圖標(biāo)等顏色比較簡(jiǎn)單、文件體積不大、起修飾作用的圖片
- PNG 與 GIF 格式，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率
- 圖像顏色比較簡(jiǎn)單的，如純色塊線條圖標(biāo)，優(yōu)先考慮使用 PNG8 格式，避免不使用 JPEG 格式
- 圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優(yōu)先考慮 PNG24 格式
- 圖像顏色豐富而且文件比較大的（40KB - 200KB）優(yōu)先考慮 JPEG 格式
- 條件允許的，優(yōu)先考慮 WebP 代替 PNG 和 JPEG 格式
四、CSS規(guī)范
代碼格式化
樣式書(shū)寫一般有兩種：一種是緊湊格式 (Compact)
.jdc{ display: block;width: 50px;}
一種是展開(kāi)格式（Expanded）
.jdc {
display: block;
width: 50px;
}
團(tuán)隊(duì)約定
統(tǒng)一使用展開(kāi)格式書(shū)寫樣式
代碼大小寫
樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書(shū)寫，屬性字符串允許使用大小寫。
/* 推薦 */
.jdc{
display:block;
}
/* 不推薦 */
.JDC{
DISPLAY:BLOCK;
}
選擇器
- 盡量少用通用選擇器
* - 不使用 ID 選擇器
- 不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器
/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推薦 */
*{}
#jdc {}
.jdc div{}
代碼縮進(jìn)
統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
.jdc {
width: 100%;
height: 100%;
}
分號(hào)
每個(gè)屬性聲明末尾都要加分號(hào)；
.jdc {
width: 100%;
height: 100%;
}
代碼易讀性
左括號(hào)與類名之間一個(gè)空格，冒號(hào)與屬性值之間一個(gè)空格
推薦：
.jdc {
width: 100%;
}
不推薦：
.jdc{
width:100%;
}
逗號(hào)分隔的取值，逗號(hào)之后一個(gè)空格
推薦：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推薦：
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
為單個(gè)css選擇器或新申明開(kāi)啟新行
推薦：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
不推薦：
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0
推薦：
.jdc {
color: rgba(255,255,255,.5);
}
不推薦：
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}
屬性值十六進(jìn)制數(shù)值能用簡(jiǎn)寫的盡量用簡(jiǎn)寫
推薦：
.jdc {
color: #fff;
}
不推薦：
.jdc {
color: #ffffff;
}
不要為 0 指明單位
推薦：
.jdc {
margin: 0 10px;
}
不推薦：
.jdc {
margin: 0px 10px;
}
屬性值引號(hào)
css屬性值需要用到引號(hào)時(shí)，統(tǒng)一使用單引號(hào)
/* 推薦 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推薦 */
.jdc {
font-family: "Hiragino Sans GB";
}
屬性書(shū)寫順序
建議遵循以下順序：
- 布局定位屬性：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 …
.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;
}
五、命名規(guī)范
由歷史原因及個(gè)人習(xí)慣引起的 DOM 結(jié)構(gòu)、命名不統(tǒng)一，導(dǎo)致不同成員在維護(hù)同一頁(yè)面時(shí)，效率低下，迭代、維護(hù)成本極高。
目錄命名
- 項(xiàng)目文件夾：pinyougou
- 樣式文件夾：css
- 腳本文件夾：js
- 樣式類圖片文件夾：img
- 產(chǎn)品類圖片文件夾： upload
- 字體類文件夾： fonts
ClassName命名
ClassName的命名應(yīng)該盡量精短、明確，必須以字母開(kāi)頭命名，且全部字母為小寫，單詞之間統(tǒng)一使用下劃線 “_” 連接
.nav_top
常用命名推薦
注意：ad、banner、gg、guanggao 等有機(jī)會(huì)和廣告掛勾的字眠不建議直接用來(lái)做ClassName，因?yàn)橛行g覽器插件（Chrome的廣告攔截插件等）會(huì)直接過(guò)濾這些類名，因此
<div class="ad"></div>
這種廣告的英文或拼音類名不應(yīng)該出現(xiàn)
另外，敏感不和諧字眼也不應(yīng)該出現(xiàn)，如：
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
| ClassName | 含義 |
|---|---|
| about | 關(guān)于 |
| account | 賬戶 |
| arrow | 箭頭圖標(biāo) |
| article | 文章 |
| aside | 邊欄 |
| audio | 音頻 |
| avatar | 頭像 |
| bg,background | 背景 |
| bar | 欄（工具類） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按鈕 |
| caption | 標(biāo)題，說(shuō)明 |
| category | 分類 |
| 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 | 失?。ㄌ崾荆?/td> |
| feature | 專題 |
| fewer | 收起 |
| field | 用于表單的輸入?yún)^(qū)域 |
| figure | 圖 |
| filter | 篩選 |
| first | 第一個(gè)，常用于列表中 |
| footer | 頁(yè)腳 |
| forum | 論壇 |
| gallery | 畫廊 |
| 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 | 促銷 |
| 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 | 容器，包，一般用于最外層 |
