代碼規範

1. 概述

歡迎使用本代碼規範，這個是我借鑒京東前端代碼規範，組織的自己内部規範。旨在增強團隊開發協作、提高代碼品質和打造開發基石的編碼規範，

以下規範是團隊基本約定的内容，必須嚴格遵循。

HTML規範

基于 W3C、蘋果開發者等官方文檔，并結合團隊業務和開發過程中總結的規範約定，讓頁面HTML代碼更具語義性。

圖檔規範

了解各種圖檔格式特性，根據特性制定圖檔規範，包括但不限于圖檔的品質約定、圖檔引入方式、圖檔合并處理等，旨在從圖檔層面優化頁面性能。

CSS規範

統一規範團隊 CSS 代碼書寫風格和使用 CSS 預編譯語言文法風格，提供常用媒體查詢語句和浏覽器私有屬性引用，并從業務層面統一規範常用子產品的引用。

命名規範

從

目錄

、

圖檔

、

HTML/CSS檔案

、

ClassName

的命名等層面約定規範團隊的命名習慣，增強團隊代碼的可讀性。

2. HTML 規範

DOCTYPE 聲明

HTML檔案必須加上 DOCTYPE 聲明，并統一使用 HTML5 的文檔聲明：

HTML5标準模版

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <title>HTML5标準模版</title>
  </head>
  <body>

  </body>
</html>

頁面語言lang

推薦使用屬性值

cmn-Hans-CN

（簡體, 中國大陸），但是考慮浏覽器和作業系統的相容性，目前仍然使用

zh-CN

屬性值

<html >

更多地區語言參考：

zh-SG 中文 (簡體, 新加坡)   對應 cmn-Hans-SG 國語 (簡體, 新加坡)
zh-HK 中文 (繁體, 香港)     對應 cmn-Hant-HK 國語 (繁體, 香港)
zh-MO 中文 (繁體, 澳門)     對應 cmn-Hant-MO 國語 (繁體, 澳門)
zh-TW 中文 (繁體, 台灣)     對應 cmn-Hant-TW 國語 (繁體, 台灣)

charset 字元集合

一般情況下統一使用 “UTF-8” 編碼

<meta charset="UTF-8">

由于曆史原因，有些業務可能會使用 “GBK” 編碼

<meta charset="GBK">

請盡量統一寫成标準的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據 IETF對UTF-8的定義，其編碼标準的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法隻是出現在某些程式設計系統中，如 .NET framework 的類 System.Text.Encoding 中的一個屬性名就叫 UTF8。

書寫風格

HTML代碼大小寫

HTML标簽名、類名、标簽屬性和大部分屬性值統一用小寫

推薦：

<div class="demo"></div>

不推薦：

<div class="DEMO"></div>
	
<DIV CLASS="DEMO"></DIV>

類型屬性

不需要為 CSS、JS 指定類型屬性，HTML5 中預設已包含

推薦：

<link rel="stylesheet" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
<script src=""></script>

不推薦：

<link rel="stylesheet" type="text/css" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
<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 >

特殊字元引用

文本可以和字元引用混合出現。這種方法可以用來轉義在文本中不能合法出現的字元。

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字元，浏覽器會将它們作為标簽解析，若要正确顯示，在 HTML 源代碼中使用字元實體

推薦：

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >more&gt;&gt;</a>

不推薦：

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >more>></a>

代碼縮進

統一使用四個空格進行代碼縮進，使得各編輯器表現一緻（各編輯器有相關配置）

<div class="jdc">
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></a>
</div>

代碼嵌套

元素嵌套規範，每個塊狀元素獨立一行，内聯元素可選

推薦：

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

不推薦：

<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>

段落元素與标題元素隻能嵌套内聯元素

推薦：

<h1><span></span></h1>
<p><span></span><span></span></p>

不推薦：

<h1><div></div></h1>
<p><div></div><div></div></p>

3. 圖檔規範

内容圖

内容圖多以商品圖等照片類圖檔形式存在，顔色較為豐富，檔案體積較大

優先考慮 JPEG 格式，條件允許的話優先考慮 WebP 格式
盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，檔案體積大
PC平台單張的圖檔的大小不應大于 200KB。

背景圖

背景圖多為圖示等顔色比較簡單、檔案體積不大、起修飾作用的圖檔

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

4. CSS規範

代碼格式化

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

.jdc{ display: block;width: 50px;}

一種是展開格式（Expanded）

.jdc {
    display: block;
    width: 50px;
}

團隊約定

統一使用展開格式書寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字元串允許使用大小寫。

/* 推薦 */
.jdc{
	display:block;
}
	
/* 不推薦 */
.JDC{
	DISPLAY:BLOCK;
}

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的标簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進

統一使用四個空格進行代碼縮進，使得各編輯器表現一緻（各編輯器有相關配置）

.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 );
}

屬性值十六進制數值能用簡寫的盡量用簡寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為

指明機關

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引号

css屬性值需要用到引号時，統一使用單引号

/* 推薦 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
	font-family: "Hiragino Sans GB";
}

屬性書寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）
自身屬性：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;
}

mozilla官方屬性順序推薦

命名規範

由曆史原因及個人習慣引起的 DOM 結構、命名不統一，導緻不同成員在維護同一頁面時，效率低下，疊代、維護成本極高。

目錄命名

項目檔案夾：pinyougou
樣式檔案夾：css
腳本檔案夾：js
樣式類圖檔檔案夾：img
産品類圖檔檔案夾： upload
字型類檔案夾： fonts

ClassName命名

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

.nav_top

常用命名推薦

注意：ad、banner、gg、guanggao 等有機會和廣告挂勾的字眠不建議直接用來做ClassName，因為有些浏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名，是以

<div class="ad"></div>

這種廣告的英文或拼音類名不應該出現

另外，敏感不和諧字眼也不應該出現，如：

<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	關于
account	賬戶
arrow	箭頭圖示
article	文章
aside	邊欄
audio	音頻
avatar	頭像
bg,background	背景
bar	欄（工具類）
branding	品牌化
crumb,breadcrumbs	面包屑
btn,button	按鈕
caption	标題，說明
category	分類
chart	圖表
clearfix	清除浮動
close	關閉
col,column	列
comment	評論
community	社群
container	容器
content	内容
copyright	版權
current	目前态，選中态
default	預設
description	描述
details	細節
disabled	不可用
entry	文章，博文
error	錯誤
even	偶數，常用于多行清單或表格中
fail	失敗（提示）
feature	專題
fewer	收起
field	用于表單的輸入區域
figure	圖
filter	篩選
first	第一個，常用于清單中
footer	頁腳
forum	論壇
gallery	畫廊
group	子產品，清除浮動
header	頁頭
help	幫助
hide	隐藏
hightlight	高亮
home	首頁
icon	圖示
info,information	資訊
last	最後一個，常用于清單中
links	連結
login	登入
logout	退出
logo	标志
main	主體
menu	菜單
meta	作者、更新時間等資訊欄，一般位于标題之下
module	子產品
more	更多（展開）
msg,message	消息
nav,navigation	導航
next	下一頁
nub	小塊
odd	奇數，常用于多行清單或表格中
off	滑鼠離開
on	滑鼠移過
output	輸出
pagination	分頁
pop,popup	彈窗
preview	預覽
previous	上一頁
primary	主要
progress	進度條
promotion	促銷
rcommd,recommendations	推薦
reg,register	注冊
save	儲存
search	搜尋
secondary	次要
section	區塊
selected	已選
share	分享
show	顯示
sidebar	邊欄，側欄
slide	幻燈片，圖檔切換
sort	排序
sub	次級的，子級的
submit	送出
subscribe	訂閱
subtitle	副标題
success	成功（提示）
summary	摘要
tab	标簽頁
table	表格
txt,text	文本
thumbnail	縮略圖
time	時間
tips	提示
title	标題
video	視訊
wrap	容器，包，一般用于最外層
wrapper	容器，包，一般用于最外層

常用 HTML CSS代碼規範代碼規範

代碼規範

1. 概述

HTML規範

圖檔規範

CSS規範

命名規範

2. HTML 規範

DOCTYPE 聲明

頁面語言lang

charset 字元集合

書寫風格

HTML代碼大小寫

類型屬性

元素屬性

特殊字元引用

代碼縮進

代碼嵌套

3. 圖檔規範

内容圖

背景圖

4. CSS規範

代碼格式化

代碼大小寫

選擇器

代碼縮進

分号

代碼易讀性

屬性值引号

屬性書寫順序

命名規範

目錄命名

ClassName命名

常用命名推薦

繼續閱讀