1.背景介紹
團(tuán)隊(duì)開發(fā)過程中找蜜，如果編碼不規(guī)范，很容易造成出現(xiàn)bug之后難以維護(hù)等問題 所以一個(gè)具有普適性的編碼規(guī)范具有很重要的意義. 黃金原則：不管有多少人共同參與同一項(xiàng)目稳析，一定要確保每一行代碼都像是同一個(gè)人編寫的洗做。
2.知識(shí)剖析
HTML規(guī)范
一.DOCTYPE的聲明: 每個(gè)HTML開頭使用！doctype來啟用標(biāo)準(zhǔn)模式聲明彰居，在此建議使用HTML5的聲明模式
二.字符集和編碼字符: 在每個(gè)頁面的head中設(shè)置字符集诚纸，一般都是使用"UTF-8"
三.語法: 使用四個(gè)空格的縮進(jìn) 在屬性上使用雙引號(hào) 不要忽略可選的關(guān)閉標(biāo)簽
四.引入css樣式以及js腳本: 需要采用外鏈的形式引入css樣式/js腳本，方便管理和修改
五.正確的標(biāo)簽嵌套?
除了固定的嵌套規(guī)則（如ul包含li陈惰，ol包含li等）畦徘，一般遵循以下規(guī)則：
1.塊級(jí)元素與塊級(jí)元素平級(jí)、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素平級(jí)
2.塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素抬闯，但內(nèi)聯(lián)元素不能包含塊級(jí)元素
3.有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)聯(lián)元素井辆，不能再包含塊級(jí)元素 h1~h6、p溶握、dt杯缺。
4.塊級(jí)元素不能放在標(biāo)簽p里面。
5.li標(biāo)簽可以包含div標(biāo)簽睡榆，因?yàn)閘i和div標(biāo)簽都是裝在內(nèi)容的容器萍肆。
六.屬性順序?
HTML屬性應(yīng)該按照特定的順序出現(xiàn)保證可讀性
除了固定的嵌套規(guī)則（如ul包含li袍榆，ol包含li等），一般遵循以下規(guī)則：
1.class
2.id匾鸥、name.
3.data-*
4.src蜡塌，for，tpye勿负，href等
5.title馏艾，alt
6.role，aria-*
七.邏輯順序?
盡量讓自己的網(wǎng)站按照先后順序 比如先寫頁頭奴愉，在寫頁體琅摩，最后寫頁腳
CSS書寫規(guī)范
一.聲明順序?
1.positioning 定位
2.因?yàn)榭墒挂粋€(gè)元素脫離文檔流，覆蓋盒模型相關(guān)的樣式
3.Box model盒模型
4.Typographic 排版
5.Visual 外觀
二.媒體查詢?
盡量將媒體查詢的位置靠近他們的相關(guān)的規(guī)則锭硼。不要把他們放在一個(gè)獨(dú)立 文件當(dāng)中房资，也不要寫在最底下，以免容易忘記
三.CLASS的命名
不但要自己能看懂代碼檀头，也要?jiǎng)e人能輕松讀懂自己的代碼轰异。
1.規(guī)則命名中，一律采用小寫加中劃線的方式暑始，不允許使用大寫字母或_
2.命名避免使用中文拼音搭独，應(yīng)該采用更簡(jiǎn)明有語義的英文單詞進(jìn)行組合+
3.不允許通過1、2廊镜、3等序號(hào)進(jìn)行命名牙肝；避免class與id重名
4.class用于標(biāo)識(shí)某一個(gè)類型的對(duì)象，命名必須言簡(jiǎn)意賅
5.盡可能提高代碼模塊的復(fù)用嗤朴，樣式盡量用組合的方式
6.規(guī)則名稱中不應(yīng)該包含顏色（red/blue）配椭、定位（left/right）等與具體顯示效果相關(guān)的信息。 應(yīng)該用意義命名雹姊，而不是樣式顯示結(jié)果命名
四.屬性簡(jiǎn)寫?
堅(jiān)持限制屬性取值簡(jiǎn)寫的使用股缸，過度使用屬性簡(jiǎn)寫往往會(huì)導(dǎo)致更混亂的代碼。 常見的屬性簡(jiǎn)寫濫用包括： padding容为，margin乓序，font，background等
3.常見問題
class命名有什么常用的方式坎背？
4.解決方案
原子類命名?
這個(gè)關(guān)鍵在于拼湊組合.ft{folat：right；}
模塊命名?
按照職能劃分命名規(guī)則 nav模塊寄雀，可以命名為nav-tittle得滤、nav-left
BEM命名?
BEM的優(yōu)點(diǎn)是獨(dú)一無二 ，不用擔(dān)心自己的樣式被覆蓋 缺點(diǎn)就是class名太長了盒犹，修改更新不方便
5.編碼實(shí)戰(zhàn)
demo
6.擴(kuò)展思考
在實(shí)際寫代碼的時(shí)候到底該如何選擇命名方式懂更？ 可以記住常見的class關(guān)鍵詞眨业，在此基礎(chǔ)上特殊化class 也可以參考github上的熱門項(xiàng)目
7.參考文獻(xiàn)
參考一：推酷
參考二：豆瓣
8.更多討論
常用的class關(guān)鍵詞有哪些?
三個(gè)問題：
1.屬性的聲明應(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)生影響血久，所以他們排在后面突照。
2.css命名在什么情況下必須用到層級(jí)？
解答：
因?yàn)橹挥卸ㄎ涣说脑夭庞性O(shè)置層級(jí)的必要氧吐。
正常的div只有一層文檔流讹蘑，div按先后順序從上往下排。
設(shè)置了定位的元素脫離了這個(gè)文檔流筑舅。但是座慰，其實(shí)定位元素也不是一定非得設(shè)置層級(jí)。如果你的定位元素代碼也是按照“先寫的在下層豁翎，后寫的在上層”這種規(guī)則寫的角骤，那就不用設(shè)置層級(jí)。
但在實(shí)際的復(fù)雜網(wǎng)頁中心剥，可能并沒有遵循這種規(guī)則邦尊，所以需要設(shè)置層級(jí)來設(shè)置上下前后順序
3.如何減少css的聲明？
解答：
比如有一對(duì)象优烧，在公共CSS文件中定義過：div#code{top:1px;right:1px;}
但現(xiàn)在需要在顯示的地方重新定義為：div#erweima{bottom:1px;right:1px;}蝉揍，即要取消之前的定義top:1px。
現(xiàn)在我改為：div#erweima{top:;bottom:1px;right:1px;}畦娄，也就是給top弄空值又沾，但是瀏覽器顯示的結(jié)果還是自動(dòng)讀取在公共CSS中的定義，top:;這種方式瀏覽器不承認(rèn)賦空熙卡。
注意,我說的那個(gè)是公共CSS,所以說,這個(gè)問題的前提是不修改公共CSS.
