代碼規范
1. 概述
歡迎使用品優購代碼規范， 這個是我借鑒京東前端代碼規范，組織的品優購內部規范，旨在增強團隊開發協作、
提高代碼質量和打造開發基石的編碼規范，
以下規范是團隊基本約定的內容，必須嚴格遵循，
HTML規范
基于 W3C、蘋果開發者 等官方檔案，并結合團隊業務和開發程序中總結的規范約定，讓頁面HTML代碼更具語意
性，
圖片規范
了解各種圖片格式特性，根據特性制定圖片規范，包括但不限于圖片的質量約定、圖片引入方式、圖片合并處理
等，旨在從圖片層面優化頁面性能，
CSS規范
統一規范團隊 CSS 代碼書寫風格和使用 CSS 預編譯語言語法風格，提供常用媒體查詢陳述句和瀏覽器私有屬性引
用，并從業務層面統一規范常用模塊的參考，
命名規范
從 目錄、圖片、HTML/CSS檔案、ClassName 的命名等層面約定規范團隊的命名習慣，增強團隊代碼的可讀性，
2. HTML 規范
DOCTYPE 宣告
HTML檔案必須加上 DOCTYPE 宣告，并統一使用 HTML5 的檔案宣告：
<!DOCTYPE html>
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 lang="zh-CN">
更多地區語言參考：
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 ></div>
不推薦：
<div ></div>
<DIV ></DIV>
型別屬性
不需要為 CSS、JS 指定型別屬性，HTML5 中默認已包含
推薦：
<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 >
特殊字符參考
文本可以和字符參考混合出現，這種方法可以用來轉義在文本中不能合法出現的字符，
在 HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽決議，若要正確顯示，在 HTML
源代碼中使用字符物體
推薦：
<a href="https://www.cnblogs.com/liangjing-pseudonym/archive/2021/03/06/#">more>></a>
不推薦：
<a href="https://www.cnblogs.com/liangjing-pseudonym/archive/2021/03/06/#">more>></a>
代碼縮進
統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）
<div >
<a href="https://www.cnblogs.com/liangjing-pseudonym/archive/2021/03/06/#"></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;
}
不要為 0 指明單位
推薦：
.jdc {
margin: 0 10px;
}
不推薦：
.jdc {
margin: 0px 10px;
}
屬性值引號
css屬性值需要用到引號時，統一使用單引號
/* 推薦 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推薦 */
.jdc {
font-family: "Hiragino Sans GB";
}
屬性書寫順序
建議遵循以下順序：
1.布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模
式）
2.自身屬性：width / height / margin / padding / border / background
3.文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他屬性（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 ></div>
這種廣告的英文或拼音類名不應該出現
另外，敏感不和諧字眼也不應該出現，如：
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></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 | 容器，包，一般用于最外層 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/266959.html
標籤：其他
上一篇：前端甘特圖dhtmx-gantt