大家好揩尸，我是IT修真院北京分院web第29期學(xué)員吳昊杰，一枚正直純潔善良的web程序員屁奏。
開發(fā)過程中應(yīng)該遵守哪些編碼規(guī)范和class命名規(guī)范岩榆？
北京分院小課堂
分享人：吳昊杰
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
規(guī)范，一個(gè)優(yōu)秀的公司必然有一個(gè)優(yōu)秀的團(tuán)隊(duì)坟瓢，一個(gè)優(yōu)秀的團(tuán)隊(duì)必然要有一個(gè)好的規(guī)范來約束和執(zhí)行勇边。國內(nèi)基本各大互聯(lián)網(wǎng)公司的前端都有自己的開發(fā)規(guī)范，但總的宗旨基本都是：代碼簡折联、易維護(hù)粒褒、性能高。對于一個(gè)大型項(xiàng)目經(jīng)常會(huì)多人協(xié)作诚镰，這時(shí)必須要有一個(gè)好的規(guī)范才能順利便捷地進(jìn)行下去奕坟。
總而言之：不管有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫的清笨。
2.知識剖析
基本準(zhǔn)則
符合web標(biāo)準(zhǔn),語義化html,結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良.頁面性能方面,代碼要求簡潔明了有序,盡可能的減小服務(wù)器負(fù)載,保證最快的解析速度.
html規(guī)范
頁面的第一行添加標(biāo)準(zhǔn)模式聲明!DOCTYPEhtml
代碼縮進(jìn)：tab鍵設(shè)置四個(gè)空格（通常在軟件右下角設(shè)置相應(yīng)空格大性律肌）
html中除了開頭的DOC和'UTF-8'或者h(yuǎn)ead里特殊情況可以大寫外，其他都為小寫函筋，css類都為小寫
建議為html根元素指定lang屬性沙合，從而為文檔設(shè)置正確的語言lang="zh-CN"
不同doctype在不同瀏覽器下會(huì)觸發(fā)不同的渲染模式()
非特殊情況下樣式文件必須外鏈至(…)之間;非特殊情況下JavaScript文件必須外鏈至頁面底部
盡可能減少div嵌套.
在頁面中盡量避免使用style屬性,即style="…";寫在相應(yīng)的樣式文件中
meta標(biāo)簽一定是在title標(biāo)簽的前面。
對于屬性的定義跌帐，確保全部使用雙引號首懈，絕不要使用單引號。
背景圖片請盡可能使用sprite技術(shù),減小http請求谨敛。
給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺添加功能究履。
不要使用@import,與<link>標(biāo)簽相比,@import指令要慢很多,不光增加了額外的請求次數(shù),還會(huì)導(dǎo)致不可預(yù)料的問題。
CSS書寫順序
顯示屬性：display/list-style/position/float/clear…
行高：line-height
文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
其他：cursor/z-index/zoom/overflow
CSS3屬性：transform/transition/animation/box-shadow/border-radius
排版規(guī)范
如果是在html中寫內(nèi)聯(lián)的css脸狸，則必須寫成單行
每一條規(guī)則的大括號{前后加空格
屬性名冒號之前不加空格最仑，冒號之后加空格
每一個(gè)屬性值后必須添加分號;并且分號后空格
多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫成多行形式
規(guī)則書寫規(guī)范
使用單引號炊甲，不允許使用雙引號
每個(gè)聲明結(jié)束都應(yīng)該帶一個(gè)分號泥彤，不管是不是最后一個(gè)聲明
除16進(jìn)制顏色和字體設(shè)置外，CSS文件中的所有的代碼都應(yīng)該小寫卿啡。
除了重置瀏覽器默認(rèn)樣式外吟吝，禁止直接為htmltag添加css樣式設(shè)置
每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設(shè)置屬性
class命名
規(guī)則命名中颈娜，一律采用小寫加中劃線的方式剑逃，不允許使用大寫字母或_
命名避免使用中文拼音浙宜，應(yīng)該采用更簡明有語義的英文單詞進(jìn)行組合+
不允許通過1、2蛹磺、3等序號進(jìn)行命名粟瞬；避免class與id重名
class用于標(biāo)識某一個(gè)類型的對象，命名必須言簡意賅
盡可能提高代碼模塊的復(fù)用萤捆，樣式盡量用組合的方式
規(guī)則名稱中不應(yīng)該包含顏色（red/blue）裙品、定位（left/right）等與具體顯示效果相關(guān)的信息。應(yīng)該用意義命名鳖轰，而不是樣式顯示結(jié)果命名
3.常見問題
問題1:class命名有什么常用方式清酥？
4.解決方案
在實(shí)際編程中，命名問題一直是很麻煩的問題蕴侣，要想代碼可讀性高焰轻，維護(hù)方便，就必須規(guī)范命名昆雀。這里介紹幾種命名方法
原子類命名規(guī)則
將復(fù)用性高的單條屬性直接命名成類
? ? ? ? ? ? ? ? .ml5{margin-left:5px;}
模塊命名規(guī)則
按照職能劃分命名規(guī)則辱志，例如，模塊是nav狞膘，便可以命名nav-tittle揩懒、nav-left
BEM
BEM思想是由于項(xiàng)目開發(fā)中，每個(gè)組件都是唯一無二的挽封，其名字也是獨(dú)一無二的已球，組件內(nèi)部元素的名字都加上組件名，并用元素的名字作為選擇器辅愿，自然組件內(nèi)的樣式就不會(huì)與組件外的樣式?jīng)_突了智亮。這是通過組件名的唯一性來保證選擇器的唯一性，從而保證樣式不會(huì)污染到組件外点待。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
問題一:原子類的優(yōu)劣阔蛉？
原子類在網(wǎng)上爭議非常大，原子類簡單方便癞埠，但是不宜維護(hù)状原，控制困難。原子類其實(shí)不是一種工具苗踪，而是一種編寫CSS的思想颠区，即：抽出高度復(fù)用的樣式模塊，獨(dú)立成一個(gè)原子類通铲，為對應(yīng)的模塊添加瓦呼。但是不宜過度使用，負(fù)責(zé)就和直接添加style沒有區(qū)別了，在涉及數(shù)值方面我的建議時(shí)不要使用原子類央串，否則修改起來超級麻煩。
7.參考文獻(xiàn)
HTML標(biāo)簽書寫規(guī)范那些事兒
移動(dòng)端適配之雪碧圖(sprite)背景圖片定位
編寫模塊化css：BEM
css最佳實(shí)踐
8.更多討論
什么時(shí)候建議使用@import?
不建議使用@import,link標(biāo)簽除了可以加載CSS外碗啄，還可以做許多別的的事故质和，例如界說RSS，界說rel連結(jié)屬性等稚字，@import就只能加載CSS了
font的縮寫順序是什么
如何計(jì)算權(quán)重饲宿？
除了谷歌翻譯，命名還有什么好點(diǎn)的思路提供沒胆描？每次命名都很頭疼
這個(gè)跟著項(xiàng)目規(guī)范走,項(xiàng)目規(guī)范怎么規(guī)定就怎么寫.
sass的編譯有什么規(guī)范瘫想？
1.@important:引入文件
2.@media:嵌套css規(guī)則
3.@extend:拓展選擇器或占位符
4.@at-root: 跳出根元素
5.@debug、@warn昌讲、@error:三者都適用于調(diào)試国夜，類似于控制臺輸出信息
css采用駝峰法命名有什么優(yōu)缺點(diǎn)
除了閱讀困難沒什么缺點(diǎn)了 ,這個(gè)按照自己的感覺走.沒有什么優(yōu)缺點(diǎn)之分.
感謝觀看
BY : 吳昊杰
開發(fā)過程中應(yīng)該遵守哪些編碼規(guī)范和class命名規(guī)范？
小課堂
分享人：吳昊杰
騰訊視頻:? https://v.qq.com/x/page/f0532r0minv.html
PPT:?https://ptteng.github.io/WEB/ppt/%E5%BC%80%E5%8F%91%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%BA%94%E8%AF%A5%E9%81%B5%E5%AE%88%E5%93%AA%E4%BA%9B%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83%E5%92%8Cclass%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83%EF%BC%9F.html#/16
