一陌选、背景介紹
為什么要遵守編碼規(guī)范？
1沥曹、好的編碼規(guī)范可以盡可能的減少一個(gè)軟件的維護(hù)成本，并且?guī)缀鯖](méi)有任何一個(gè)軟件葵擎，在其整個(gè)生命周期中胳蛮，均由最初的開(kāi)發(fā)人員來(lái)維護(hù)；
2慧脱、好的編碼規(guī)范可以改善軟件的可讀性渺绒，可以讓開(kāi)發(fā)人員盡快而徹底地理解新的代碼；
3菱鸥、好的編碼規(guī)范可以最大限度的提高團(tuán)隊(duì)開(kāi)發(fā)的合作效率宗兼；
4、長(zhǎng)期的規(guī)范性編碼還可以讓開(kāi)發(fā)人員養(yǎng)成好的編碼習(xí)慣氮采，甚至鍛煉出更加嚴(yán)謹(jǐn)?shù)乃季S殷绍。
二、知識(shí)剖析
基本準(zhǔn)則
符合web標(biāo)準(zhǔn)鹊漠，語(yǔ)義化html主到，結(jié)構(gòu)表現(xiàn)行為分離，兼容性?xún)?yōu)良躯概。頁(yè)面性能方面登钥，代碼要求簡(jiǎn)潔明了有序，盡可能的減小服務(wù)器負(fù)載娶靡，保證最快的解析速度牧牢。
html規(guī)范
1、頁(yè)面的第一行添加標(biāo)準(zhǔn)模式聲明<!DOCTYPE html>
2固蛾、代碼縮進(jìn)：tab鍵設(shè)置四個(gè)空格（通常在軟件右下角設(shè)置相應(yīng)空格大薪嶂础）
3、html中除了開(kāi)頭的DOC和'UTF-8'或者h(yuǎn)ead里特殊情況可以大寫(xiě)外艾凯，其他都為小寫(xiě)献幔，css類(lèi)都為小寫(xiě)
4、建議為html根元素指定lang屬性趾诗，從而為文檔設(shè)置正確的語(yǔ)言lang="zh-CN"
5蜡感、不同doctype在不同瀏覽器下會(huì)觸發(fā)不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">
6、非特殊情況下樣式文件必須外鏈至< head >...< /head>之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部
7恃泪、盡可能減少div嵌套
8郑兴、在頁(yè)面中盡量避免使用style屬性,即style="…";寫(xiě)在相應(yīng)的樣式文件中
9、對(duì)于屬性的定義贝乎，確保全部使用雙引號(hào)情连，絕不要使用單引號(hào)
10、背景圖片請(qǐng)盡可能使用sprite技術(shù),減小http請(qǐng)求
11览效、給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺(tái)添加功能
12却舀、不要使用@import,與<link>標(biāo)簽相比,@import指令要慢很多,不光增加了額外的請(qǐng)求次數(shù),還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題虫几。
CSS規(guī)范
排版規(guī)范
1、如果是在html中寫(xiě)內(nèi)聯(lián)的css挽拔，則必須寫(xiě)成單行
2辆脸、每一條規(guī)則的大括號(hào){前后加空格
3、屬性名冒號(hào)之前不加空格螃诅，冒號(hào)之后加空格
4啡氢、每一個(gè)屬性值后必須添加分號(hào)，并且分號(hào)后加空格
5术裸、多個(gè)selector共用一個(gè)樣式集倘是，則多個(gè)selector必須寫(xiě)成多行形式
class命名
1、規(guī)則命名中穗椅，一律采用小寫(xiě)加中劃線的方式辨绊，不允許使用大寫(xiě)字母或_
2奶栖、命名避免使用中文拼音匹表，應(yīng)該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合
3、不允許通過(guò)1宣鄙、2袍镀、3等序號(hào)進(jìn)行命名；避免class與id重名
4冻晤、class用于標(biāo)識(shí)某一個(gè)類(lèi)型的對(duì)象苇羡，命名必須言簡(jiǎn)意賅
5、盡可能提高代碼模塊的復(fù)用鼻弧，樣式盡量用組合的方式
6设江、規(guī)則名稱(chēng)中不應(yīng)該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關(guān)的信息攘轩。應(yīng)該用意義命名叉存，而不是樣式顯示結(jié)果命名
CSS書(shū)寫(xiě)規(guī)范
1CSS有些屬性是可以縮寫(xiě)的，比如padding,margin,font等等度帮，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶(hù)的閱讀體驗(yàn)歼捏。
2去掉小數(shù)點(diǎn)前的“0”
3、簡(jiǎn)寫(xiě)命名——很多用戶(hù)都喜歡簡(jiǎn)寫(xiě)類(lèi)名笨篷，但前提是要讓人看懂你的命名瞳秽。
4、16進(jìn)制顏色代碼縮寫(xiě)——有些顏色代碼是可以縮寫(xiě)的率翅，我們就盡量縮寫(xiě)吧练俐，提高用戶(hù)體驗(yàn)為主。
5冕臭、長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名腺晾。
6瓢棒、不要隨意使用Id——id在JS是唯一的，不能多次使用丘喻，而使用class類(lèi)選擇器卻可以重復(fù)使用脯宿，另外id的優(yōu)先級(jí)優(yōu)先與class，所以id應(yīng)該按需使用泉粉，而不能濫用连霉。
三、常見(jiàn)問(wèn)題
屬性的聲明應(yīng)該按照什么順序嗡靡？
四跺撼、解決方案
相關(guān)的屬性聲明應(yīng)該以下面的順序分組處理：
1、Positioning位置屬性（position, top, right, z-index, display, float等）
2讨彼、Box model盒模型 （width,height,padding,margin）
3歉井、Typographic排版（font,line-height,letter-spacing,color,text-align等）
4、Visual外觀（background,border等）
Positioning處在第一位哈误，因?yàn)樗梢允挂粋€(gè)元素脫離正常文本流哩至，并且覆蓋盒模型相關(guān)的樣式。盒模型緊跟其后蜜自，因?yàn)樗麤Q定了一個(gè)組件的大小和位置菩貌。
其他屬性只在組件內(nèi)部起作用或者不會(huì)對(duì)前面兩種情況的結(jié)果產(chǎn)生影響，所以他們排在后面重荠。
五箭阶、編碼實(shí)戰(zhàn)
六、擴(kuò)展思考
問(wèn)題:下面四種寫(xiě)法哪個(gè)渲染速度最快戈鲁？
#test .test{}
ul.test{}
#test ul{}
.test{}
“如果單純的ul與.test PK仇参，我還真拿不定誰(shuí)的渲染速度更快些。但是婆殿，一旦牽扯到層級(jí)與標(biāo)簽诈乒，我100%確定，.test這種最直接的命名方式渲染效率是最高的鸣皂∽デ矗”
“CSS的渲染方式是“從右往左”渲染的，就拿#test ul{}舉例寞缝，先渲染頁(yè)面上所有的ul標(biāo)簽癌压，再去尋找id為test的元素。因此上面這個(gè)問(wèn)題荆陆，先渲染頁(yè)面上所有的div滩届，再去尋找其老爸有沒(méi)有id為test的元素。"
所以被啼，CSS命名帜消，只要出現(xiàn)了層級(jí)棠枉，出現(xiàn)了標(biāo)簽，就是一次額外的渲染泡挺，層級(jí)越多辈讶，渲染的開(kāi)銷(xiāo)也就越大，這就是為什么一些前輩的文章會(huì)建議要盡量避免過(guò)深的層級(jí)娄猫。
七贱除、更多討論
討論點(diǎn)一：在上面的問(wèn)題中，如果是使用JavaScript獲取DOM元素媳溺，那么哪種寫(xiě)法速度最快月幌？
討論點(diǎn)二：css命名在什么情況下必須用到層級(jí)？
討論點(diǎn)三：如何減少css的聲明悬蔽？
八扯躺、參考文獻(xiàn)
參考一：推薦大家使用的CSS書(shū)寫(xiě)規(guī)范、順序|設(shè)計(jì)達(dá)人
參考二：精簡(jiǎn)高效的CSS命名準(zhǔn)則/方法——張?chǎng)涡?/a>
參考三：編碼規(guī)范
