本規(guī)范參考Google HTML/CSS Style Guideline和Google Javascript Style Guideline，并加入了作者自身經(jīng)驗(yàn)進(jìn)行編寫，因作者本身是設(shè)計(jì)師，前端水平有限，有爭見處在該文章下評論或者郵件作者進(jìn)行討論。
本文首發(fā)于limlift的簡書博客LeapDeXign，轉(zhuǎn)載請注明來源及作者。
規(guī)范的意義
規(guī)范是為了更好的編寫代碼以及日后的維護(hù)。
- 每個(gè)人寫代碼都有自己的風(fēng)格規(guī)范，在大型團(tuán)隊(duì)內(nèi)同個(gè)項(xiàng)目只由個(gè)人獨(dú)立編寫完成的情況基本是不存在的，規(guī)范好統(tǒng)一的一套代碼規(guī)范，有益于團(tuán)隊(duì)成員之間的交流協(xié)作，減少了因?yàn)槊蛘哌壿嬈婀侄冻龅慕涣鞒杀荆?/li>
- 即使團(tuán)隊(duì)中只由個(gè)人獨(dú)立編寫完成，也需要遵循一定的代碼規(guī)范，這是為了在日后的維護(hù)重構(gòu)工作中，維護(hù)以及重構(gòu)人員可以依賴這套代碼規(guī)范去快速理解整個(gè)項(xiàng)目，大大減少了時(shí)間成本。
通用規(guī)則
協(xié)議
在對應(yīng)鏈接支持https協(xié)議的情況下，使用https安全協(xié)議開頭，不建議用http協(xié)議或者不用協(xié)議
<a href="www.zhihu.com">知乎</a> ?
<a >知乎</a> ?
<a >知乎</a> ?
縮進(jìn)
縮進(jìn)用soft tab(兩個(gè)或者四個(gè)半角空格)，盡量不要使用tab制表符
字符匹配
HTML／CSS采用小寫字母
Javascript中視情況而定
保持單詞的獨(dú)立性，單詞與單詞之間用下劃線或者折線聯(lián)結(jié)
命名規(guī)則
命名選詞需要明確簡潔精準(zhǔn)，不要用無意義的英文單詞
不要用拼音！不要用拼音！不要用拼音！
<div class="wenzhang"></div> ?
<div class="article"></div> ?
<div class="yee-1992"></div> ?
<div class="ninty's"></div> ?
靈活用縮寫，不要濫用縮寫！
<div class="register register-author"></div> ?
<div class="reg reg-author"></div> ?
單詞間的聯(lián)結(jié)，用中折折線，方便編輯器類雙擊選中當(dāng)前獨(dú)立單詞修改
<div class="articleauthor"></div> ?
<div class="article_author"></div> ?
<div class="article-author"></div> ?
- 駝峰命名法
首單詞字母小寫，往后每個(gè)單詞首字母大寫，不要加入任何聯(lián)結(jié)符號
function initIndication () {
}
function showBox () {
}
- 下劃線與折線
對于多個(gè)單詞的樣式名盡量使用-或者_進(jìn)行聯(lián)結(jié)，不可用駝峰命名法
文件壓縮與加密
上線時(shí)需要將對應(yīng)的css和js文件都壓縮一遍，后綴文件名之前加上.min表示這是壓縮過的文件
壓縮是為了使文件體積更加小巧，提升網(wǎng)頁的加載速度
對于js文件而言，除了壓縮還需要加密，這是為了防止某些關(guān)鍵js被人扒取直接使用，不涉及到私密性的js可以免除這一個(gè)過程。
HTML
HTML5 Doctype
每個(gè)HTML頁面第一行都應(yīng)該添加標(biāo)準(zhǔn)模式的聲明，確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
DOCTYPE聲明已經(jīng)被顯著地簡化，無須聲明無意義的屬性。
必須大寫。
<！DOCTYPE html>
IE兼容模式
IE支持通過特定的<meta>標(biāo)簽來確定當(dāng)前頁面繪制應(yīng)該采用的IE版本。一般如果不想兼容低版本IE（edge或者10以下），可以設(shè)置為edge mode模式來通知IE采用最新格式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
邏輯對應(yīng)
根據(jù)元素的功能邏輯選擇對應(yīng)的標(biāo)簽，特殊情況另外處理；
<div onclick="clickFunction()">點(diǎn)擊鏈接</div> ?
<a onclick="clickFunction()">點(diǎn)擊鏈接</a> ?
富媒體說明
需要說明的地方必須說明，可以為img這類標(biāo)簽加載失敗的時(shí)候給用戶提供圖像的信息，并且alt屬性對于視覺殘障人士來說是唯一了解圖像內(nèi)容的方式。
 ?
 ?
字符轉(zhuǎn)換
特殊符號轉(zhuǎn)換字符需要注意，并非所有的字符都需要轉(zhuǎn)義字符進(jìn)行轉(zhuǎn)換
The currency symbol for the Euro is “&eur;”. ?
The currency symbol for the Euro is “€”. ??
引用文件屬性
一般css以及javacript文件的引用默認(rèn)屬性是定好的，無須重定義，在一些老舊的瀏覽器也是有默認(rèn)的
除非特殊情況（使用的不是js文件），無須定義引用文件格式
<link src="css/dayoo-system.min.css" rel="stylesheet" type="text/style"> ?
<link src="css/dayoo-system.min.css" rel="stylesheet"> ?
<script src="js/dayoo-system.min.js" type="text/javascript"></script> ?
<script src="js/dayoo-system.min.js"></script> ?
元素間獨(dú)立性
除了<em>``<b>等修飾型標(biāo)簽之外，獨(dú)立的元素型標(biāo)簽盡量用獨(dú)立隔開，并且注意縮進(jìn)
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
引號
使用雙引號，不要用單引號，作用是統(tǒng)一標(biāo)準(zhǔn)并且避免單雙引號混用造成的問題。
 ?
 ?
加載順序
- css文件需要在HTML文件一開始就引入，可以避免網(wǎng)頁內(nèi)容加載緩慢的時(shí)候出現(xiàn)一瞬間的丟失樣式的問題
- js文件需要在HTML文件結(jié)尾引入，等待HTML框架加載完畢后再執(zhí)行對HTML元素的操作
代碼整潔性
同級元素在縮進(jìn)上嚴(yán)格執(zhí)行對齊，方便查找以及瀏覽整體架構(gòu)
<div class="wrap">
<p class="title">知乎，分享你剛編的經(jīng)歷</p>
<div class="content">
<p>文章標(biāo)題</p>
</div>
</div>
<div class="pop-box">
<div class="box">
<p class="title">彈出框標(biāo)題</p>
<span class="desc">彈出框內(nèi)容</span>
<a href="hideBox()" class="btn btn-cancel">關(guān)閉</a>
</div>
屬性順序
HTML元素屬性應(yīng)該按照以下順序排列編寫，確保代碼的易讀性
class
id, name
data-*
src, for, type, href, value
titile, alt
role, aria-*
class用于標(biāo)識高復(fù)用性組件因此排在首位，而id用于唯一性標(biāo)識組件，排在第二位（謹(jǐn)慎使用id）。
按鈕用<a>還是用<button>
HTML編寫過程中經(jīng)常遇到這個(gè)問題，答案并不是統(tǒng)一的，往往需要看后臺開發(fā)人員的習(xí)慣以及網(wǎng)頁本身的應(yīng)用場景下的功能，我的建議是，實(shí)在不確定用哪一個(gè)的時(shí)候，你可以將兩種標(biāo)簽的樣式都統(tǒng)一寫好，畢竟你也不知道開發(fā)過程中會出什么幺蛾子導(dǎo)致兩種標(biāo)簽需要混用
- 一般情況下，涉及到信息表單的提交時(shí)，最好使用
<button>標(biāo)簽；只涉及到跳轉(zhuǎn)／功能函數(shù)時(shí)，推薦使用<a>標(biāo)簽
代碼簡潔性（減少標(biāo)簽數(shù)量）
非必要增加的標(biāo)簽結(jié)構(gòu)不需要增加，否則會造成結(jié)構(gòu)復(fù)雜甚至結(jié)構(gòu)沖突或者樣式?jīng)_突
<span class="avatar">
</span> ?
?
CSS
加載樣式表
從外部文件加載css，盡可能減少加載的文件數(shù)量。
用LINK標(biāo)簽加載，永遠(yuǎn)不要在css文件里用@import的方式引入
非必要情況下不要在文件中使用內(nèi)聯(lián)引入的樣式。
命名
class名稱只可用小寫字符和折線-。
選擇有意義的英文單詞，杜絕拼音。
命名法可參照「模塊」-「類型」-「標(biāo)題」-「屬性」類似的層級命名法，該方法也適用于項(xiàng)目文件／設(shè)計(jì)稿圖層的整理命名：（可基于最近的父級class或者基礎(chǔ)class作為新class的前綴。）
.header {}
.header .userinfo {}
.header .userinfo .avatar {}
或者
.header {}
.header-user-avatar {}
.header-user-name {}
.icon {}
.icon-home-outline {}
.icon-home-full {}
.btn {}
.btn-default {}
.btn-cancel {}
.btn-alert {}
多屬性囊括
- 一般情況下，對于多屬性囊括的css屬性統(tǒng)一寫在一起
.btn {
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
}?
.btn {
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
}??
- 特殊情況下，例如需要對某個(gè)屬性進(jìn)行操作的時(shí)候，才需要拆開屬性來寫
.click {
background-color:#fff;
background-image:url(../images/icon.png);
background-position:0 0;
background-repeat:no-repeat;
}
.click:hover {
background-color:#eee;
background-position:-44px 0;
}
0與1之間
取值0和1之間的數(shù)值時(shí)，省略0不寫
.btn-cancel {
font-size:0.875rem;
}?
.btn-cancel {
font-size:.875rem;
}??
縮寫色值
某些可以縮寫的色值（aabbcc型或者aaaaaa型）使用縮寫
.btn-cancel {
background-color:#eebbcc;
}?
.btn-cancel {
background-color:#ebc;
}??
多級聯(lián)結(jié)
class名的英文單詞用折線-連接
.popupboxcontent {} ?
.popup-box-content {} ??
id命名用駝峰命名法
#my-canvas {} ?
#myCanvas {} ??
選擇器權(quán)重
權(quán)重計(jì)算規(guī)則：
id選擇器：1.0.0
class選擇器：0.1.0
元素選擇器：0.0.1
- 當(dāng)選擇器選到當(dāng)前元素的時(shí)候，遵循權(quán)重計(jì)算規(guī)則；
- 當(dāng)選擇器沒有選到當(dāng)前元素的時(shí)候，遵循就近原則；
- 1和2沖突的時(shí)候，1的優(yōu)先度高。
第一種情況：
<style>
#box1 .spec2 p {
color: red;
}
div idv #box3 p {
color: blue;
}
div.spec1 div.spec2 div.spec3 p{
color: green;
}
</style>
<div id="box1" class="spec1">
<div id="box2" class="spec2">
<div id="box3" class="spec3">
<p>文字</p>
</div>
</div>
</div>
第二種情況：
<style>
div p {
color: red;
}
#box{
color: blue;
}
</style>
<div id="box">
<p id="para" class="spec">
<span>文字</span>
</p>
</div>
第三種情況：
<style>
span {
color: green;
}
.nav {
color: red;
}
.nav ul li {
color: blue;
}
</style>
<div class="nav">
<ul>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
<li><span>文字</span></li>
</ul>
</div>
css-hack
針對IE各種低版本的兼容，使用屬性前（后）綴法：
| hack | 寫法 | 兼容 |
|---|---|---|
| * | *color | 標(biāo)準(zhǔn)模式：IE6/7；quirk模式：IE All； |
| + | +color | 標(biāo)準(zhǔn)模式：IE6/7；quirk模式：IE All； |
| - | -color | 標(biāo)準(zhǔn)模式：IE6；quirk模式：IE 6； |
| _ | _color | 標(biāo)準(zhǔn)模式：IE6；quirk模式：IE6/7/8/9； |
| # | #color | 標(biāo)準(zhǔn)模式：IE6/7；quirk模式：IE All； |
| \0 | color:red\0 | 標(biāo)準(zhǔn)模式：IE8/9/10；quirk模式： none； |
| \9\0 | color:red\9\0 | 標(biāo)準(zhǔn)模式：IE9/10；quirk模式：none； |
| !important | color:red !important; | 標(biāo)準(zhǔn)模式：IE7/8/9/10；quirk模式：IE10； |
屬性獨(dú)立性
除非是壓縮過后的css文件，否則建議每個(gè)屬性保持獨(dú)立換行。
.click {background-color:#fff;background-image:url(../images/icon.png);background-position:0 0;background-repeat:no-repeat;} ?
.click {
background-color:#fff;
background-image:url(../images/icon.png);
background-position:0 0;
background-repeat:no-repeat;
} ??
line-height的重要性
針對某些只包含純文字的元素容器，文字類標(biāo)簽或者父級標(biāo)簽一定要注意寫明line-height，因?yàn)樵诓煌瑸g覽器中l(wèi)ine-height有不同表現(xiàn)（尤其是低版本IE），而不是去寫死height來限制它的高度（特別需求例外），利用文字的line-height把父級容器撐開。
line-height不應(yīng)該用帶單位的數(shù)值來寫（如24px／2rem等），而是直接寫數(shù)字系數(shù)，系數(shù)是基于文字的font-size為基礎(chǔ)來計(jì)算的，比如font-size為16px的文字，line-height寫為1.5，則ling-height為24px。
Javascript
常量，變量與函數(shù)
- 常量使用大寫字母，下劃線表示聯(lián)結(jié)
- 變量使用小寫字母，不要用任何聯(lián)結(jié)符號，使用駝峰命名法
- 變量／常量／函數(shù)的命名要有意義，不要用拼音！不要用拼音！不要用拼音！
- 命名方法參照一下的格式：「動詞」+「模塊名詞」+「修飾」
- Boolean變量最好用is開頭
- 函數(shù)名使用駝峰命名法
- 變量和常量聲明必須放在開頭
- 函數(shù)聲明放在文件中間；
- 最后才是onload函數(shù)來加載文檔。
var COUNT_A = 1;
var isTrue = TRUE;
for(var time = 0; time++; time<data.length-1){
//do someting
}
function createInfo(argument){
//do someting
}
function popUpBox(title,context,url){
//make box container pop up
}
函數(shù)聲明的方式
函數(shù)聲明一共有三種方式:
- 函數(shù)聲明
function abc(){} - 函數(shù)表達(dá)式
abc = function() {} - 構(gòu)造函數(shù)
var abc = new function () {}
- 使用Function構(gòu)造函數(shù)定義函數(shù)的方式是一個(gè)函數(shù)表達(dá)式，不推薦使用這種方式定義函數(shù)，原因在于這種方式會導(dǎo)致解析兩次代碼，影響性能(第一次解析常規(guī)的JavaScript代碼，第二次解析傳入構(gòu)造函數(shù)的字符串)
- 這種語法唯一的特點(diǎn)是：可以直觀地理解“函數(shù)是對象，函數(shù)名是指針”的概念。
對于函數(shù)聲明和函數(shù)表達(dá)式兩種定義函數(shù)的方式而言，解析器并不是一視同仁的。解析器會率先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可用（可以訪問）；對于函數(shù)表達(dá)式，則必須等到解析器執(zhí)行到它所在的代碼行，才會真正被解釋執(zhí)行。直接上例子吧。。。
例子1:
alert(sum(10,10));
function sum(num1,num2){
return num1+num2;
}
例子2:
alert(sum(10,10));//20
var sum = function(num1,num2){
return num1+num2;
};
瀏覽器解析器在上述兩個(gè)例子中的解析情況并不一致，解析器會率先讀取函數(shù)聲明，而對于函數(shù)表達(dá)式而言它對解析器的意義只不過是一個(gè)表達(dá)式，因此在上述例子中，例子2會報(bào)錯(cuò)，因?yàn)槔?的函數(shù)表達(dá)式解析慢于執(zhí)行語句，執(zhí)行語句查找不到對應(yīng)的函數(shù)執(zhí)行。
函數(shù)的封裝
何為函數(shù)封裝，就是講一個(gè)或多個(gè)功能的函數(shù)封裝起來，對內(nèi)對外只有數(shù)據(jù)接口。
- 函數(shù)封裝的意義在于，對于具有公用性的功能，我們可以不必去重復(fù)寫同一功能的函數(shù)，只需要調(diào)用封裝好的函數(shù)即可，保持代碼的簡潔性和模塊性。
注意函數(shù)的封裝，尤其適用jQuery庫時(shí)，需要深刻理解jQ的運(yùn)行機(jī)制
function initDocument(data) {
//do someting;
}
function popUpBox(ele) {
//show your popup box；
}
$(function(){
initDocument(string-data);
popUpBox('popup-box');
})
以上例子中的popupBox函數(shù)就是封裝好的函數(shù)，只需要傳入元素的樣式名／id名就可以對該元素進(jìn)行操作。
靈活運(yùn)用函數(shù)之間的套用關(guān)系
根據(jù)不同函數(shù)之間的關(guān)聯(lián)性以及函數(shù)本身的獨(dú)立性／功能特點(diǎn)上的共有性來封裝函數(shù)，進(jìn)行函數(shù)的調(diào)用，簡易模塊化js文件，方便日后的維護(hù)以及重復(fù)參考；
注釋
注釋都需要寫在語句前面
單行注釋使用//，在注釋語句開頭使用
//這是單行注釋
多行注釋／行內(nèi)注釋使用/**/，包裹住注釋語句
/*
這是多行注釋
僅供此文檔使用
聯(lián)系方式為xxxxx
/*
function fuckThisDoc (argument/*對單個(gè)變量的注釋*/,number){
return abc;
}
如何吃透js
研究jQ源碼或者下載一個(gè)開源的js插件，硬啃，從讀碼到理解再到優(yōu)化，基本上就能理解這門語言的運(yùn)轉(zhuǎn)機(jī)制了。
