本規(guī)范參考Google HTML/CSS Style Guideline和Google Javascript Style Guideline犯助，并加入了作者自身經(jīng)驗進(jìn)行編寫，因作者本身是設(shè)計師，前端水平有限，有爭見處在該文章下評論或者郵件作者進(jìn)行討論。
本文首發(fā)于limlift的簡書博客LeapDeXign，轉(zhuǎn)載請注明來源及作者雇逞。

規(guī)范的意義

規(guī)范是為了更好的編寫代碼以及日后的維護(hù)。

• 每個人寫代碼都有自己的風(fēng)格規(guī)范茁裙，在大型團(tuán)隊內(nèi)同個項目只由個人獨立編寫完成的情況基本是不存在的塘砸，規(guī)范好統(tǒng)一的一套代碼規(guī)范，有益于團(tuán)隊成員之間的交流協(xié)作晤锥，減少了因為命名或者邏輯奇怪而付出的交流成本谣蠢；
• 即使團(tuán)隊中只由個人獨立編寫完成，也需要遵循一定的代碼規(guī)范，這是為了在日后的維護(hù)重構(gòu)工作中眉踱，維護(hù)以及重構(gòu)人員可以依賴這套代碼規(guī)范去快速理解整個項目挤忙，大大減少了時間成本。

通用規(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(兩個或者四個半角空格)，盡量不要使用tab制表符

字符匹配

HTML／CSS采用小寫字母
Javascript中視情況而定
保持單詞的獨立性婿禽，單詞與單詞之間用下劃線或者折線聯(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)前獨立單詞修改

  <div class="articleauthor"></div> ?
  <div class="article_author"></div> ?
  <div class="article-author"></div> ?

• 駝峰命名法

首單詞字母小寫模聋，往后每個單詞首字母大寫肩民，不要加入任何聯(lián)結(jié)符號

function initIndication () {
}
      
function showBox () {
}

• 下劃線與折線

對于多個單詞的樣式名盡量使用-或者_進(jìn)行聯(lián)結(jié)，不可用駝峰命名法

文件壓縮與加密

上線時需要將對應(yīng)的css和js文件都壓縮一遍链方，后綴文件名之前加上.min表示這是壓縮過的文件
壓縮是為了使文件體積更加小巧持痰，提升網(wǎng)頁的加載速度
對于js文件而言，除了壓縮還需要加密祟蚀，這是為了防止某些關(guān)鍵js被人扒取直接使用工窍，不涉及到私密性的js可以免除這一個過程。

HTML

HTML5 Doctype

每個HTML頁面第一行都應(yīng)該添加標(biāo)準(zhǔn)模式的聲明前酿，確保在每個瀏覽器中擁有一致的展現(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()">點擊鏈接</div> ?
<a onclick="clickFunction()">點擊鏈接</a> ?

富媒體說明

需要說明的地方必須說明瞬浓，可以為img這類標(biāo)簽加載失敗的時候給用戶提供圖像的信息初婆，并且alt屬性對于視覺殘障人士來說是唯一了解圖像內(nèi)容的方式。

![](images/avatar.jpg) ?
![](images/avatar.jpg) ?

字符轉(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> ?

元素間獨立性

除了<em>``<b>等修飾型標(biāo)簽之外弊琴，獨立的元素型標(biāo)簽盡量用獨立隔開兆龙，并且注意縮進(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)并且避免單雙引號混用造成的問題紫皇。

![](images/avatar.jpg) ?
![](images/avatar.jpg) ?

加載順序

• css文件需要在HTML文件一開始就引入，可以避免網(wǎng)頁內(nèi)容加載緩慢的時候出現(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">
      ![](images/example.jpg)
      <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)常遇到這個問題番宁，答案并不是統(tǒng)一的，往往需要看后臺開發(fā)人員的習(xí)慣以及網(wǎng)頁本身的應(yīng)用場景下的功能赖阻，我的建議是蝶押，實在不確定用哪一個的時候，你可以將兩種標(biāo)簽的樣式都統(tǒng)一寫好火欧，畢竟你也不知道開發(fā)過程中會出什么幺蛾子導(dǎo)致兩種標(biāo)簽需要混用

• 一般情況下棋电，涉及到信息表單的提交時，最好使用<button>標(biāo)簽苇侵；只涉及到跳轉(zhuǎn)／功能函數(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)題」-「屬性」類似的層級命名法闷叉，該方法也適用于項目文件／設(shè)計稿圖層的整理命名：（可基于最近的父級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;
}??
   

• 特殊情況下握侧，例如需要對某個屬性進(jìn)行操作的時候蚯瞧，才需要拆開屬性來寫

.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ù)值時，省略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)重計算規(guī)則：

id選擇器：1.0.0
class選擇器：0.1.0
元素選擇器：0.0.1

1. 當(dāng)選擇器選到當(dāng)前元素的時候品擎，遵循權(quán)重計算規(guī)則埋合；
2. 當(dāng)選擇器沒有選到當(dāng)前元素的時候，遵循就近原則孽查；
3. 1和2沖突的時候饥悴，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各種低版本的兼容盲再，使用屬性前（后）綴法：

屬性獨立性

除非是壓縮過后的css文件，否則建議每個屬性保持獨立換行叉谜。

.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，因為在不同瀏覽器中l(wèi)ine-height有不同表現(xiàn)（尤其是低版本IE）停局，而不是去寫死height來限制它的高度（特別需求例外）很钓，利用文字的line-height把父級容器撐開。
line-height不應(yīng)該用帶單位的數(shù)值來寫（如24px／2rem等）董栽，而是直接寫數(shù)字系數(shù)码倦，系數(shù)是基于文字的font-size為基礎(chǔ)來計算的，比如font-size為16px的文字裆泳，line-height寫為1.5，則ling-height為24px柠硕。

Javascript

常量工禾，變量與函數(shù)

1. 常量使用大寫字母运提，下劃線表示聯(lián)結(jié)
2. 變量使用小寫字母，不要用任何聯(lián)結(jié)符號闻葵，使用駝峰命名法
3. 變量／常量／函數(shù)的命名要有意義民泵，不要用拼音！不要用拼音槽畔！不要用拼音栈妆！
4. 命名方法參照一下的格式：「動詞」+「模塊名詞」+「修飾」
5. Boolean變量最好用is開頭
6. 函數(shù)名使用駝峰命名法
7. 變量和常量聲明必須放在開頭
8. 函數(shù)聲明放在文件中間；
9. 最后才是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ù)聲明一共有三種方式:

1. 函數(shù)聲明function abc(){}
2. 函數(shù)表達(dá)式abc = function() {}
3. 構(gòu)造函數(shù)var abc = new function () {}

• 使用Function構(gòu)造函數(shù)定義函數(shù)的方式是一個函數(shù)表達(dá)式鳞尔，不推薦使用這種方式定義函數(shù)，原因在于這種方式會導(dǎo)致解析兩次代碼早直，影響性能(第一次解析常規(guī)的JavaScript代碼寥假，第二次解析傳入構(gòu)造函數(shù)的字符串)
• 這種語法唯一的特點是：可以直觀地理解“函數(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;  
}; 

瀏覽器解析器在上述兩個例子中的解析情況并不一致，解析器會率先讀取函數(shù)聲明县踢，而對于函數(shù)表達(dá)式而言它對解析器的意義只不過是一個表達(dá)式转绷，因此在上述例子中，例子2會報錯硼啤，因為例子2的函數(shù)表達(dá)式解析慢于執(zhí)行語句议经，執(zhí)行語句查找不到對應(yīng)的函數(shù)執(zhí)行。

函數(shù)的封裝

何為函數(shù)封裝谴返，就是講一個或多個功能的函數(shù)封裝起來煞肾，對內(nèi)對外只有數(shù)據(jù)接口。

• 函數(shù)封裝的意義在于嗓袱，對于具有公用性的功能籍救，我們可以不必去重復(fù)寫同一功能的函數(shù)，只需要調(diào)用封裝好的函數(shù)即可渠抹，保持代碼的簡潔性和模塊性蝙昙。

注意函數(shù)的封裝闪萄，尤其適用jQuery庫時，需要深刻理解jQ的運行機制

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)行操作。

靈活運用函數(shù)之間的套用關(guān)系

根據(jù)不同函數(shù)之間的關(guān)聯(lián)性以及函數(shù)本身的獨立性／功能特點上的共有性來封裝函數(shù)烈拒，進(jìn)行函數(shù)的調(diào)用圆裕，簡易模塊化js文件，方便日后的維護(hù)以及重復(fù)參考荆几；

注釋

注釋都需要寫在語句前面
單行注釋使用//吓妆，在注釋語句開頭使用

//這是單行注釋

多行注釋／行內(nèi)注釋使用/**/，包裹住注釋語句

/*
這是多行注釋
僅供此文檔使用
聯(lián)系方式為xxxxx
/*
    
function fuckThisDoc (argument/*對單個變量的注釋*/,number){
   return abc;
}

如何吃透js

研究jQ源碼或者下載一個開源的js插件伴郁，硬啃耿战，從讀碼到理解再到優(yōu)化，基本上就能理解這門語言的運轉(zhuǎn)機制了焊傅。