一始花、HTML規(guī)范
HTML頭部文檔類型
建議使用 text/html 格式的 HTML
避免使用XHTML妄讯，因?yàn)閄HTML以及它的屬性孩锡，比如application/xhtml+xml在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限
<!DOCTYPE html>
IE 兼容模式
優(yōu)先使用最新版本的IE 和 Chrome 內(nèi)核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
移動(dòng)端樣式書(shū)寫(xiě)規(guī)范
盡可能使用以屏幕寬度為參照的等比例布局 以js根據(jù)屏幕寬度動(dòng)態(tài)計(jì)算根元素font-size 變換 rem 與 px 換算比例，做到等比縮放定義 viewport 為移動(dòng)端設(shè)備優(yōu)化捞挥，設(shè)置可見(jiàn)區(qū)域的寬度和初始縮放比例,禁止用戶手動(dòng)縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
HTML標(biāo)簽的閉合
1浮创、自閉合的標(biāo)簽無(wú)需閉合，如：<input>砌函、<img>斩披、<br>、<meta>讹俊、<link>垦沉、<hr>等
不推薦方式：<input type="text" name="antzone"/></input>
推薦的方式：<input type="text" name="antzone"/>
2、可選閉合標(biāo)簽建議閉合仍劈，如：<body>厕倍、<li>
3、閉合標(biāo)簽必須閉合
HTML基本格式
HTML頁(yè)面使用雙引號(hào)贩疙，標(biāo)簽和標(biāo)簽屬性統(tǒng)一使用小寫(xiě)形式
縮進(jìn)
縮進(jìn)使用soft tab（4個(gè)空格）讹弯，嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)
HTML標(biāo)簽嵌套規(guī)則
1、HTML4/XHTML的嵌套規(guī)則
（1）內(nèi)聯(lián)元素不能嵌套塊元素
（2）<p>元素和<h1>~<h6>元素不能嵌套塊元素
（3）ul,li/ol,li/dl,dt,dd擁有父子級(jí)關(guān)系的標(biāo)簽这溅；ul组民、ol下都只能跟li，dl下只能跟dt悲靴、dd
（4）a標(biāo)簽不能嵌套a
2臭胜、HTML5元素嵌套規(guī)則
（1）元素的分類不再是塊元素或內(nèi)聯(lián)元素這樣來(lái)分類（其實(shí)從來(lái)就沒(méi)有這樣分），而是按照如下分類來(lái)分：Flow（流式元素）癞尚、Heading（標(biāo)題元素）耸三、Sectioning（章節(jié)元素）、Phrasing（段落元素）浇揩、Embedded（嵌入元素）仪壮、Interactive（交互元素）、Metadata（元數(shù)據(jù)元素）
（2）使用語(yǔ)義化標(biāo)簽胳徽，盡量少的使用毫無(wú)意義的標(biāo)簽积锅，僅僅用于設(shè)置樣式，語(yǔ)義化的HTML結(jié)構(gòu)膜廊，有助于搜索引擎理解，另一方面多人協(xié)作時(shí)淫茵，能迅速了解開(kāi)發(fā)者意圖
HTML多媒體回溯
頁(yè)面中的圖片爪瓜、視頻和canvas 動(dòng)畫(huà)等都要確保有替代的顯示內(nèi)容
圖片文件我們可采用有意義的備選文本（alt屬性規(guī)定），視頻和音頻文件我們可以為其加上說(shuō)明文字或字幕
例如：<img src="antozen.jpg" alt="網(wǎng)絡(luò)圖譜">
代碼格式規(guī)則
（1）每一個(gè)塊狀元素匙瘪，列表元素和表格元素后铆铆，加上一新空白行
（2）內(nèi)聯(lián)元素寫(xiě)在一行內(nèi)蝶缀，塊狀元素還有列表和表格要另起一行
內(nèi)容、表現(xiàn)和行為分離
盡量在文檔和模板中只包含結(jié)構(gòu)性的HTML薄货；而將所有表現(xiàn)代碼翁都，移入樣式表中；將所有動(dòng)作行為谅猾，移入腳本之中
此外柄慰，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件
主要規(guī)則如下:
（1）頁(yè)面中盡量不要引入超過(guò)兩個(gè)樣式表税娜，例如main.css和vendor.css
（2）頁(yè)面中保證只引入一個(gè)js文件（如果有多個(gè)文件坐搔，將它們合并壓縮后引入）
（3）不要使用內(nèi)聯(lián)樣式和內(nèi)部樣式
（4）不要使用表象元素，例如<b>, <u>, <center>, <font>和<b>等
（5）不使用元素中表象的屬性敬矩，例如align="center"
結(jié)構(gòu)的搭建
（1）采用HTML5標(biāo)準(zhǔn)時(shí)開(kāi)頭應(yīng)該加上<!DOCTYPE html>
（2）應(yīng)在head標(biāo)簽中引入CSS文件概行，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息
（3）在<body>標(biāo)簽的末尾引入JavaScript文件，這樣可以在頁(yè)面顯示之后再編譯JavaScript文件弧岳，以加快頁(yè)面讀取速度凳忙，同時(shí)有助于JavaScript對(duì)頁(yè)面中的元素進(jìn)行操作
（4）對(duì)元素的操作應(yīng)添加在JavaScript代碼中，而不要在HTML中添加
HTML布爾屬性值
HTML5規(guī)范中 disabled禽炬、checked涧卵、selected 等屬性不用設(shè)置值
HTML代碼注釋
如果可能盡量不寫(xiě)注釋，盡可能減少文檔的體積瞎抛；如果必須要添加注釋艺演，那么就要遵循如下規(guī)則:
（1）詳盡注釋，解釋代碼解決問(wèn)題桐臊、解決思路胎撤、是否為新鮮方案等
（2）模塊注釋，github建議不使用模塊結(jié)束注釋
（3）待辦注釋断凶，TODO:待辦事項(xiàng)
特別說(shuō)明:注釋文本與兩端（--）之間要有一個(gè)空格
網(wǎng)頁(yè)標(biāo)簽語(yǔ)義化
如何判斷網(wǎng)頁(yè)標(biāo)簽語(yǔ)義是否良好：去掉樣式伤提，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性
語(yǔ)義化標(biāo)簽注意的一些問(wèn)題：
（1）盡可能少的使用無(wú)語(yǔ)義標(biāo)簽div和span
（2）語(yǔ)義不明顯時(shí)认烁，可用p也可用div的地方肿男，盡量使用p，因?yàn)閜默認(rèn)有上下邊距却嗡，去除樣式后的可讀性更好舶沛，對(duì)兼容特殊終端有利
（3）不要使用純樣式標(biāo)簽，例如bfontu,改用CSS設(shè)置語(yǔ)義上強(qiáng)調(diào)的文本可以包在strong和em標(biāo)簽里窗价，strong的默認(rèn)樣式是加粗如庭，而em的默認(rèn)樣式是斜體
屬性
1.HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性撼港。
class(首位)
id 坪它、 name
data-*
src骤竹、for、 type往毡、 href
title蒙揣、alt
aria-*、 role
2.id 和 class
（1）class 用于標(biāo)識(shí)高度可復(fù)用組件开瞭，因此應(yīng)該排在首位懒震。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如惩阶，頁(yè)面內(nèi)的書(shū)簽）挎狸，因此排在第二位
（2）id一般用于網(wǎng)頁(yè)大致布局，比如標(biāo)志断楷、導(dǎo)航锨匆、主體內(nèi)容、版權(quán)冬筒，規(guī)范命名為#logo , #nav, #content ,#copyright
（3）一般項(xiàng)目中class用于css中恐锣，id被js用來(lái)操作dom且不添加樣式，（jq操作class一般不加樣式）
二舞痰、JavaScript規(guī)范
縮進(jìn)
使用tab縮進(jìn)土榴，4個(gè)字節(jié)（空格）
分號(hào)
以下幾種情況后需加分號(hào)：
1、變量聲明
2响牛、表達(dá)式
3玷禽、return
4、throw
5呀打、break
6矢赁、continue
7、do-while
空格
以下幾種情況不需要空格：
1贬丛、對(duì)象的屬性名后 前綴一元運(yùn)算符后
以下幾種情況需要空格：
1撩银、二元運(yùn)算符前后
2、三元運(yùn)算符'?:'前后
3豺憔、代碼塊'{'前
4额获、下列關(guān)鍵字前：else, while, catch, finally
5、下列關(guān)鍵字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
6恭应、單行注釋'//'后（若單行注釋和代碼同行抄邀，則'//'前也需要），多行注釋'*'后
7昼榛、對(duì)象的屬性值前
8境肾、for循環(huán)，分號(hào)后留有一個(gè)空格，前置條件如果有多個(gè)准夷，逗號(hào)后留一個(gè)空格
8、無(wú)論是函數(shù)聲明還是函數(shù)表達(dá)式莺掠，'{'前一定要有空格
9衫嵌、函數(shù)的參數(shù)之間
10、后綴一元運(yùn)算符前
11彻秆、函數(shù)調(diào)用括號(hào)前
12楔绞、無(wú)論是函數(shù)聲明還是函數(shù)表達(dá)式，'('前不要空格
13唇兑、數(shù)組的'['后和']'前
14酒朵、對(duì)象的'{'后和'}'前
15、運(yùn)算符'('后和')'前
空行
以下幾種情況需要空行：
1扎附、變量聲明后（當(dāng)變量聲明在代碼塊的最后一行時(shí)蔫耽，則無(wú)需空行）
2、注釋前（當(dāng)注釋在代碼塊的第一行時(shí)留夜，則無(wú)需空行）
3匙铡、代碼塊后（在函數(shù)調(diào)用、數(shù)組碍粥、對(duì)象中則無(wú)需空行）
4鳖眼、文件最后保留一個(gè)空行
換行
換行的地方，行末必須有','或者運(yùn)算符嚼摩；
以下幾種情況不需要換行：
1钦讳、下列關(guān)鍵字后：else, catch, finally 代碼塊'{'前
以下幾種情況需要換行：
1、代碼塊'{'后和'}'前
2枕面、變量賦值后
原始值
1愿卒、字符串應(yīng)當(dāng)始終使用雙引號(hào)且保持一行
2、特殊值null在以下情況下可用：
（1）用來(lái)初始化一個(gè)可能被賦值為對(duì)象的變量時(shí)使用
（2）用來(lái)和一個(gè)已經(jīng)初始化的變量比較膊畴，這個(gè)變量有可能是對(duì)象
（3）當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)掘猿，被用作參數(shù)傳入
（4）當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，被用作返回值傳入
（5）其余情況避免使用null
3.避免使用特殊值undefined唇跨。判斷一個(gè)變量是否定義應(yīng)當(dāng)使用typeof操作符
運(yùn)算符間距
二元運(yùn)算符前后必須使用一個(gè)空格保持表達(dá)式整潔稠通，操作符包括運(yùn)算符和邏輯運(yùn)算符
var found = (value[i] === item);
if(found && (count > 10)){
doSomething();
}
對(duì)象直接量
1、起始左花括號(hào)應(yīng)當(dāng)同表達(dá)式保持一行
2买猖、每個(gè)屬性的名值對(duì)應(yīng)當(dāng)保持一個(gè)縮進(jìn)改橘，第一個(gè)屬性應(yīng)當(dāng)在左花括號(hào)后另起一行
3、每個(gè)屬性的名值對(duì)使用不含引號(hào)的屬性名玉控，其后緊跟冒號(hào)（之前不含空格）
4飞主、若屬性值是函數(shù)類型，函數(shù)體在屬性名之下另起一行，而且其前后均應(yīng)保留一個(gè)空行一組相關(guān)屬性前后可插入空行提升代碼的可讀性
5碌识、結(jié)束的右花括號(hào)獨(dú)占一行
var object = {
key1:value1碾篡，
key2:value2，
func:function() {
// doSomething
}筏餐，
key3 = value3
}开泽；
6、當(dāng)對(duì)象字面量作為函數(shù)參數(shù)時(shí)魁瞪，若值是變量穆律，起始花括號(hào)應(yīng)當(dāng)同函數(shù)名在同一行
doSomething({
key1:value1,
key2:value2
});
注釋
1.單行注釋
（1）獨(dú)占一行的注釋，用來(lái)解釋下一行代碼
（2）在代碼行的尾部的注釋导俘，用來(lái)解釋它之前的代碼
（3）多行峦耘，用來(lái)注釋掉一個(gè)代碼塊
（4）代碼行尾單行注釋的情況，應(yīng)該確保代碼結(jié)尾同注釋之間至少一個(gè)縮進(jìn)
（5）單行注釋之前要空格
if (condition) {
// 如果代碼執(zhí)行到這里旅薄，表明通過(guò)了安全檢查
allowed();
}
行內(nèi)注釋
var result = something + somethingElse; // 行內(nèi)注釋
2.多行注釋
（1）首行僅僅包括/注釋開(kāi)始辅髓，該行不應(yīng)當(dāng)有其他內(nèi)容
（2）接下來(lái)的行以開(kāi)頭并保持左對(duì)齊，這些行可以文字描述
（3）最后一行以*/開(kāi)頭并同先前行保持對(duì)齊少梁，不應(yīng)該有文字
（4）注釋前空行利朵，星號(hào)后空格
if (condition) {
/*
* 如果代碼執(zhí)行到這里
* 說(shuō)明通過(guò)了所有檢測(cè)
*/
allowed();
}
函數(shù)聲明
1、函數(shù)名和開(kāi)始圓括號(hào)之間不應(yīng)該有空格
2猎莲、結(jié)束圓括號(hào)和右邊起始花括號(hào)應(yīng)該有空格绍弟，右側(cè)花括號(hào)和函數(shù)關(guān)鍵字保持一行
3、參數(shù)名之間應(yīng)當(dāng)有在逗號(hào)之后保留一個(gè)空格
4著洼、立即被調(diào)用的函數(shù)應(yīng)當(dāng)在調(diào)用的外層用圓括號(hào)包裹
function outer(arg1, arg2){
var count = arg1,
name = arg2,
found = false,
empty;
function inner(){
//代碼
}
//調(diào)用inner()的代碼
}
命名
1樟遣、變量命名應(yīng)當(dāng)采用小駝峰命名格式，首字母小寫(xiě)身笤，每個(gè)單詞首字母大寫(xiě)豹悬，第一個(gè)單詞應(yīng)當(dāng)是一個(gè)名詞，不要在變量命名中使用下劃線
2液荸、函數(shù)命名也采用小駝峰命名格式瞻佛，首字母小寫(xiě)，第一個(gè)單詞應(yīng)當(dāng)是動(dòng)詞娇钱，和變量名進(jìn)行區(qū)分
3伤柄、構(gòu)造函數(shù)命名采用大駝峰命名格式，首字母大寫(xiě)文搂，以非動(dòng)詞開(kāi)頭
4适刀、常量的命名應(yīng)當(dāng)是所有字母大寫(xiě)，不同字母之間用單個(gè)下劃線隔開(kāi)
5煤蹭、對(duì)象的屬性和方法命名同變量和函數(shù)笔喉，私有屬性或者方法取视，在前面加一個(gè)下劃線
數(shù)組、對(duì)象
1常挚、對(duì)象屬性名不需要加引號(hào)作谭；
2、對(duì)象以縮進(jìn)的形式書(shū)寫(xiě)奄毡，不要寫(xiě)在一行丢早；
3、數(shù)組秧倾、對(duì)象最后不要有逗號(hào)。
賦值
給變量賦值時(shí)傀缩，如果右側(cè)是含有比較語(yǔ)句的表達(dá)式那先，需要用圓括號(hào)包裹
等號(hào)運(yùn)算符
使用===（嚴(yán)格相等）和！==（嚴(yán)格不相等）替代相等（==）和不等（赡艰！=）來(lái)避免弱類型轉(zhuǎn)換錯(cuò)誤
三元操作符
三元操作符應(yīng)當(dāng)僅僅用在條件賦值語(yǔ)句中售淡，而不要作為if語(yǔ)句的替代品
var value = condition ？ value1 ： value2;
語(yǔ)句
1慷垮、簡(jiǎn)單語(yǔ)句
每行最多只包含一條語(yǔ)句揖闸，所有簡(jiǎn)單的語(yǔ)句以分號(hào)（；）結(jié)束
2料身、復(fù)合語(yǔ)句
（1）括起來(lái)的語(yǔ)句應(yīng)當(dāng)比較復(fù)合語(yǔ)句多縮進(jìn)一個(gè)層級(jí)
（2）開(kāi)始的大括號(hào)應(yīng)當(dāng)在復(fù)合語(yǔ)句所在行的末尾汤纸；結(jié)束的大括號(hào)獨(dú)占一行，且與符合語(yǔ)句開(kāi)始保持同樣的縮進(jìn)
（3）若是if語(yǔ)句開(kāi)始的關(guān)鍵字芹血，其后緊跟一個(gè)空格贮泞，起始大括號(hào)在空格之后
if語(yǔ)句
if (condition) {
statements
}
絕不允許在if語(yǔ)句中省略花括號(hào)，單行語(yǔ)句同樣需要花括號(hào)
if (condition) {
statements
} else if (condition) {
statements
} else {
statements
}
for語(yǔ)句
for語(yǔ)句的初始化部分不應(yīng)該有變量聲明
var i,len;
for (i=0, len=10; i < len; i++){
//代碼
}
當(dāng)使用for-in語(yǔ)句時(shí)幔烛，記得使用hasOwnProperty()進(jìn)行雙重檢查來(lái)過(guò)濾出對(duì)象的成員
switch語(yǔ)句
switch (value) {
case 1:
/*falls through,No break*/
case 2:
doSomething();
break;
case 3:
return true;
default:
throw new Error ("This shouldn't happen");
}
jshint
1啃擦、用'===', '!=='代替'==', '!='；
2饿悬、for-in里一定要有hasOwnProperty的判斷令蛉；
3、不要在內(nèi)置對(duì)象的原型上添加方法狡恬，如Array, Date珠叔；
4、不要在內(nèi)層作用域的代碼里聲明了變量弟劲，之后卻訪問(wèn)到了外層作用域的同名變量运杭；
5、變量不要先使用后聲明函卒；
6辆憔、不要在一句代碼中單單使用構(gòu)造函數(shù)撇眯，記得將其賦值給某個(gè)變量；
7虱咧、不要在同個(gè)作用域下聲明同名變量熊榛；
8、不要在一些不需要的地方加括號(hào)腕巡，例：delete(a.b)玄坦；
9、不要使用未聲明的變量（全局變量需要加到.jshintrc文件的globals屬性里面）绘沉；
10煎楣、不要聲明了變量卻不使用；
11车伞、不要在應(yīng)該做比較的地方做賦值择懂；
12、debugger不要出現(xiàn)在提交的代碼里另玖；
13困曙、數(shù)組中不要存在空元素；
14谦去、不要在循環(huán)內(nèi)部聲明函數(shù)慷丽；
15、不要像這樣使用構(gòu)造函數(shù)鳄哭，例：new function () { ... }, new Object要糊；
留白
1、兩行空行如下情況使用
（1）在不同的源代碼文件之間
（2）在類和接口定義之間
2妆丘、單行空行如下情況使用
（1）方法之間
（2）方法中局部變量和第一行語(yǔ)句之間
（3）多行或者單行注釋之前
（4）方法中邏輯代碼塊之間以提升代碼的可讀性
3杨耙、空格在如下情況下使用
（1）關(guān)鍵字后跟括號(hào)的情況應(yīng)當(dāng)用空格隔開(kāi)
（2）參數(shù)列表中逗號(hào)之后應(yīng)當(dāng)保留一個(gè)空格
（3）所有的除了點(diǎn)（.）之外的二元運(yùn)算符，其操作數(shù)都應(yīng)該用空格隔開(kāi)飘痛。單目運(yùn)算符的操作數(shù)之間不應(yīng)該用空白隔開(kāi)
（4）for語(yǔ)句中的表達(dá)式之間應(yīng)當(dāng)用空格隔開(kāi)
其他
1珊膜、不要混用tab和space；
2宣脉、不要在一處使用多個(gè)tab或space车柠；
3、換行符統(tǒng)一用'LF'塑猖；
4竹祷、對(duì)上下文this的引用只能使用'_this', 'that', 'self'其中一個(gè)來(lái)命名；
5羊苟、行尾不要有空白字符塑陵；
6、switch的falling through和no default的情況一定要有注釋特別說(shuō)明蜡励；
7令花、不允許有空的代碼塊阻桅。
三、CSS
樣式編寫(xiě)規(guī)范
1兼都、布局以流式布局為主嫂沉，禁止濫用絕對(duì)定位，只在有必要的時(shí)候才使用絕對(duì)定位
2扮碧、樣式書(shū)寫(xiě)區(qū)分全局樣式趟章，布局樣式，單元樣式慎王，頁(yè)面私有樣式蚓土，
3、頁(yè)面私有樣式應(yīng)寫(xiě)在頁(yè)面scoped 私有class下面
4赖淤、單元樣式的選擇器不許包含頁(yè)面私有的class及布局class蜀漆，以便于單元樣式的復(fù)用
5、裝飾性的背景圖盡量寫(xiě)在樣式里漫蛔，源于風(fēng)格樣式和內(nèi)容區(qū)分的思想
6、建議使用預(yù)處理樣式 stylus 或scss,建立基礎(chǔ)預(yù)定義樣式文件:
（1）reset//樣式重置
（2）variables//變量文件旧蛾，包括如color莽龟，btn size，風(fēng)格相關(guān)的顏色锨天、尺寸應(yīng)定義在variables 里面毯盈，便于定義與切換風(fēng)格
（3）mixins//混合樣式定義
（4） index//全局樣式定義
（5）公有樣式文件 public.styl 依次引用 reset.styl variables.styl mixins.styl global.styl
7、統(tǒng)一定義字體大小如： medium normal large small mini 類病袄，全局統(tǒng)一定義字體大新Ц场（大多數(shù)地方）
8、圖標(biāo)建議統(tǒng)一使用字體文件或者SVG文件
9益缠、如非必要脑奠，不讓選擇器深度超過(guò)3層
以下幾種情況不需要空格：
1、屬性名后
2幅慌、多個(gè)規(guī)則的分隔符','前
3宋欺、!important '!'后
4、屬性值中'('后和')'前
5胰伍、行末不要有多余的空格
以下幾種情況需要空格：
1齿诞、屬性值前
2、選擇器'>', '+', '~'前后
3骂租、'{'前
4祷杈、!important '!'前
5、@else 前后
6渗饮、屬性值中的','后
7但汞、注釋'/'后和'/'前
需要換行的情況：
1宿刮、'{'后和'}'前
2、每個(gè)屬性獨(dú)占一行
3特占、多個(gè)規(guī)則的分隔符','后
注釋
注釋統(tǒng)一用'/* */'（scss中也不要用'//'）
縮進(jìn)與下一行代碼保持一致
可位于一個(gè)代碼行的末尾糙置，與代碼間隔一個(gè)空格
引號(hào)
1、最外層統(tǒng)一使用雙引號(hào)
2是目、url的內(nèi)容要用引號(hào)
3谤饭、屬性選擇器中的屬性值需要引號(hào)
命名
1、類名使用小寫(xiě)字母懊纳，以中劃線分隔
2揉抵、id采用駝峰式命名
3、scss中的變量嗤疯、函數(shù)冤今、混合、placeholder采用駝峰式命名
屬性聲明順序
1茂缚、文檔流相關(guān)屬性（display, position, float, clear, visibility, table-layout）
2戏罢、盒模型相關(guān)屬性（width, height, margin, padding, border）
3、排版相關(guān)屬性（font, line-height, text-align, text-indent, vertical-align）
4脚囊、裝飾性相關(guān)屬性（color, background, opacity, cursor）
5龟糕、文字排版（font, line-height, letter-spacing, color- text-align）
6、生成內(nèi)容相關(guān)屬性（background, border）
注：每塊屬性定義完成后悔耘，使用空行與另一屬性塊區(qū)別
顏色
1讲岁、顏色16進(jìn)制用小寫(xiě)字母
2、顏色16進(jìn)制盡量用簡(jiǎn)寫(xiě)
屬性簡(jiǎn)寫(xiě)
1衬以、屬性簡(jiǎn)寫(xiě)需要你非常清楚屬性值的正確順序缓艳，而且在大多數(shù)情況下并不需要設(shè)置屬性簡(jiǎn)寫(xiě)中包含的所有值，所以建議盡量分開(kāi)聲明會(huì)更加清晰看峻；
2阶淘、margin 和 padding 相反，需要使用簡(jiǎn)寫(xiě)互妓；
/* not good */
.element {
transition: opacity 1s linear 2s;
}
/* good */
.element {
transition-delay: 2s;
transition-timing-function: linear;
transition-duration: 1s;
transition-property: opacity;
}
媒體查詢
盡量將媒體查詢的規(guī)則靠近與他們相關(guān)的規(guī)則舶治，不要將他們一起放到一個(gè)獨(dú)立的樣式文件中，或者丟在文檔的最底部车猬，這樣做只會(huì)讓大家以后更容易忘記他們
SCSS相關(guān)
1霉猛、提交的代碼中不要有 @debug
2、聲明順序：
（1）@extend
（2）不包含 @content 的 @include
（3）包含 @content 的 @include
（4）自身屬性
（5）嵌套規(guī)則
3珠闰、@import 引入的文件不需要開(kāi)頭的'_'和結(jié)尾的'.scss'惜浅；
4、嵌套最多不能超過(guò)5層
5伏嗜、@extend 中使用placeholder選擇器
6坛悉、去掉不必要的父級(jí)引用符號(hào)'&'
其他
1伐厌、不允許有空的規(guī)則；
2裸影、元素選擇器用小寫(xiě)字母挣轨；
3、去掉小數(shù)點(diǎn)前面的0轩猩；
4卷扮、去掉數(shù)字中不必要的小數(shù)點(diǎn)和末尾的0；
5均践、屬性值'0'后面不要加單位晤锹；
6、同個(gè)屬性不同前綴的寫(xiě)法需要在垂直方向保持對(duì)齊彤委，具體參照下邊的寫(xiě)法鞭铆；
7、無(wú)前綴的標(biāo)準(zhǔn)屬性應(yīng)該寫(xiě)在有前綴的屬性后面焦影；
8车遂、不要在同個(gè)規(guī)則里出現(xiàn)重復(fù)的屬性，如果重復(fù)的屬性是連續(xù)的則沒(méi)關(guān)系斯辰；
9舶担、不要在一個(gè)文件里出現(xiàn)兩個(gè)相同的規(guī)則；
10椒涯、用 border: 0; 代替 border: none;柄沮；
11回梧、選擇器不要超過(guò)4層（在scss中如果超過(guò)4層應(yīng)該考慮用嵌套的方式來(lái)寫(xiě)）废岂；
12、發(fā)布的代碼中不要有 @import狱意；
13湖苞、盡量少用'*'選擇器。
