1. 概述
常用代碼規(guī)范旨在增強團隊開發(fā)協(xié)作、提高代碼質(zhì)量和打造開發(fā)基石的編碼規(guī)范，
以下規(guī)范是團隊基本約定的內(nèi)容，必須嚴(yán)格遵循。
HTML 規(guī)范
基于 W3C、蘋果開發(fā)者 等官方文檔，并結(jié)合團隊業(yè)務(wù)和開發(fā)過程中總結(jié)的規(guī)范約定，讓頁面 HTML 代碼更具語義性。
圖片規(guī)范
了解各種圖片格式特性，根據(jù)特性制定圖片規(guī)范，包括但不限于圖片的質(zhì)量約定、圖片引入方式、圖片合并處理等，旨在從圖片層面優(yōu)化頁面性能。
CSS 規(guī)范
統(tǒng)一規(guī)范團隊 CSS 代碼書寫風(fēng)格和使用 CSS 預(yù)編譯語言語法風(fēng)格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。
命名規(guī)范
從 目錄、圖片、HTML/CSS文件、ClassName 的命名等層面約定規(guī)范團隊的命名習(xí)慣，增強團隊代碼的可讀性。
2. 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>
頁面語言 lang
推薦使用屬性值 cmn-Hans-CN（簡體，中國大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
更多地區(qū)語言參考：
zh-SG 中文 (簡體, 新加坡) 對應(yīng) cmn-Hans-SG 普通話 (簡體, 新加坡)
zh-HK 中文 (繁體, 香港) 對應(yīng) cmn-Hant-HK 普通話 (繁體, 香港)
zh-MO 中文 (繁體, 澳門) 對應(yīng) cmn-Hant-MO 普通話 (繁體, 澳門)
zh-TW 中文 (繁體, 臺灣) 對應(yīng) cmn-Hant-TW 普通話 (繁體, 臺灣)
charset 字符集合
一般情況下統(tǒng)一使用 UTF-8 編碼
<meta charset="UTF-8">
由于歷史原因，有些業(yè)務(wù)可能會使用 GBK 編碼
<meta charset="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 中的一個屬性名就叫 UTF8。
書寫風(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>
元素屬性
- 元素屬性值使用雙引號語法
- 元素屬性值可以寫上的都寫上
推薦：
<input type="text" >
<input type="radio" name="name" checked="checked" >
不推薦：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出現(xiàn)。這種方法可以用來轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。
在 HTML 中不能使用小于號 < 和大于號 > 特殊字符，瀏覽器會將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實體
推薦：
<a href="#">more>></a>
不推薦：
<a href="#">more>></a>
代碼縮進
統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
<div class="jdc">
<a href="#"></a>
</div>
代碼嵌套
元素嵌套規(guī)范，每個塊狀元素獨立一行，內(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>
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）
.jdc { display: block; width: 50px;}
一種是展開格式（Expanded）
.jdc {
display: block;
width: 50px;
}
團隊約定
統(tǒng)一使用展開格式書寫樣式
代碼大小寫
樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。
/* 推薦 */
.jdc {
display: block;
}
/* 不推薦 */
.JDC {
DISPLAY: BLOCK;
}
選擇器
- 盡量少用通用選擇器
* - 不使用
ID選擇器 - 不使用無具體語義定義的標(biāo)簽選擇器
/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p {}
/* 不推薦 */
*{}
#jdc {}
.jdc div {}
代碼縮進
統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
.jdc {
width: 100%;
height: 100%;
}
分號
每個屬性聲明末尾都要加分號；
.jdc {
width: 100%;
height: 100%;
}
代碼易讀性
左括號與類名之間一個空格，冒號與屬性值之間一個空格
推薦：
.jdc {
width: 100%;
}
不推薦：
.jdc {
width: 100%;
}
逗號分隔的取值，逗號之后一個空格
推薦：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推薦：
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
為單個 css 選擇器或新申明開啟新行
推薦：
.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);
}
屬性值十六進制數(shù)值能用簡寫的盡量用簡寫
推薦：
.jdc {
color: #fff;
}
不推薦：
.jdc {
color: #ffffff;
}
不要為 0 指明單位
推薦：
.jdc {
margin: 0 10px;
}
不推薦：
.jdc {
margin: 0px 10px;
}
屬性值引號
css 屬性值需要用到引號時，統(tǒng)一使用單引號
/* 推薦 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推薦 */
.jdc {
font-family: "Hiragino Sans GB";
}
屬性書寫順序
建議遵循以下順序：
- 布局定位屬性：
display / position / float / clear / visibility / overflow（建議display第一個寫，畢竟關(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ī)范
由歷史原因及個人習(xí)慣引起的 DOM 結(jié)構(gòu)、命名不統(tǒng)一，導(dǎo)致不同成員在維護同一頁面時，效率低下，迭代、維護成本極高。
目錄命名
- 項目文件夾：
project - 樣式文件夾：
css - 腳本文件夾：
js - 樣式類圖片文件夾：
img - 產(chǎn)品類圖片文件夾：
upload - 字體類文件夾：
fonts
ClassName 命名
ClassName 的命名應(yīng)該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統(tǒng)一使用下劃線 _ 連接
例如：.nav_top
常用命名推薦
注意：ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做 ClassName，因為有些瀏覽器插件（Chrome 的廣告攔截插件等）會直接過濾這些類名，因此
<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)題，說明 |
| 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 | 細節(jié) |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 錯誤 |
| even | 偶數(shù)，常用于多行列表或表格中 |
| fail | 失敗（提示） |
| feature | 專題 |
| fewer | 收起 |
| field | 用于表單的輸入?yún)^(qū)域 |
| figure | 圖 |
| filter | 篩選 |
| first | 第一個，常用于列表中 |
| footer | 頁腳 |
| forum | 論壇 |
| gallery | 畫廊 |
| group | 模塊，清除浮動 |
| header | 頁頭 |
| help | 幫助 |
| hide | 隱藏 |
| hightlight | 高亮 |
| home | 主頁 |
| icon | 圖標(biāo) |
| info,information | 信息 |
| last | 最后一個，常用于列表中 |
| links | 鏈接 |
| login | 登錄 |
| logout | 退出 |
| logo | 標(biāo)志 |
| main | 主體 |
| menu | 菜單 |
| meta | 作者、更新時間等信息欄，一般位于標(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 | 進度條 |
| 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 | 時間 |
| tips | 提示 |
| title | 標(biāo)題 |
| video | 視頻 |
| wrap | 容器，包，一般用于最外層 |
| wrapper | 容器，包，一般用于最外層 |
