大家好岳守，我是IT修真院深圳分院第4期學(xué)員梁耀，一枚正直純潔善良的web程序員凉唐。
今天給大家分享：
【css-task12】開發(fā)過程中應(yīng)該遵守哪些編碼規(guī)范和class命名規(guī)范庸追？
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Web小課堂【深圳第328期】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 分享人：梁耀
1.背景介紹
? ? ? 團隊開發(fā)過程中，如果編碼不規(guī)范台囱，很容易造成出現(xiàn)bug之后難以維護等問題淡溯，所以一個具有普適性的編碼規(guī)范具有很重要的意義.
? ? ?黃金原則：不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的簿训。
2.知識剖析
HTML規(guī)范
一.DOCTYPE的聲明
每個HTML開頭使用咱娶！doctype來啟用標準模式聲明，在此建議使用HTML5的聲明模式
二.字符集和編碼字符
在每個頁面的中設(shè)置字符集强品，一般都是使用"UTF-8"
三.語法
使用四個空格的縮進
在屬性上使用雙引號
不要忽略可選的關(guān)閉標簽
四.引入css樣式以及js腳本需要采用外鏈的形式引入css樣式/js腳本膘侮，方便管理和修改。
五.正確的標簽嵌套除了固定的嵌套規(guī)則（如ul包含li择懂，ol包含li等）喻喳，一般遵循以下規(guī)則：
1.塊級元素與塊級元素平級、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素平級
（a是內(nèi)聯(lián)元素困曙，h1是塊級元素）
2.塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素表伦，但內(nèi)聯(lián)元素不能包含塊級元素
3.有幾個特殊的塊級元素只能包含內(nèi)聯(lián)元素谦去，不能再包含塊級元素h1~h6、p蹦哼、dt
4.塊級元素不能放在標簽p里面5.li標簽可以包含div標簽鳄哭，因為li和div標簽都是裝在內(nèi)容的容器。
六.屬性順序HTML屬性應(yīng)該按照特定的順序出現(xiàn)保證可讀性
1.class
2.id纲熏、name
.3.data-*
4.src妆丘，for，tpye局劲，href等
5.title勺拣，alt
6.role，aria-*
七.邏輯順序
盡量讓自己的網(wǎng)站按照先后的順序
如先寫頁頭——頁體——頁腳
css命名規(guī)范
一.聲明順序
1.positioning 定位(position/clear/float/)
因為可使一個元素脫離文檔流鱼填，覆蓋盒模型相關(guān)的樣式
Box model盒模型（width/margin/padding）
Typographic 排版
Visual 外觀（color/background）
2.媒體查詢
盡量將媒體查詢的位置靠近他們的相關(guān)的規(guī)則药有。不要把他們放在一個獨立 文件當中，也不要寫在最底下苹丸，以免容易忘記
3.class的命名
不但要自己能看懂代碼愤惰，也要別人能輕松讀懂自己的代碼
規(guī)則命名中，一律采用小寫加中劃線的方式赘理，不允許使用大寫字母或 _
命名避免使用中文拼音宦言，應(yīng)該采用更簡明有語義的英文單詞進行組合
?命名注意縮寫，但是不能盲目縮寫商模，具體請參見常用的CSS命名規(guī)則
?不允許通過1奠旺、2、3等序號進行命名
?避免class與id重名
?id用于標識模塊或頁面的某一個父容器區(qū)域阻桅，名稱必須唯一凉倚，不要隨意新建id
-class用于標識某一個類型的對象，命名必須言簡意賅嫂沉。
?盡可能提高代碼模塊的復(fù)用稽寒，樣式盡量用組合的方式
4.屬性簡寫
堅持限制屬性取值簡寫的使用，過度使用屬性簡寫往往會導(dǎo)致更混亂的代碼趟章。 常見的屬性簡寫濫用包括：
padding杏糙，margin，font蚓土，background等
2.知識剖析
三.class的命名
不但要自己能看懂代碼宏侍，也要別人能輕松讀懂自己的代碼。
規(guī)則命名中蜀漆，一律采用小寫加中劃線的方式谅河，不允許使用大寫字母或_
命名避免使用中文拼音，應(yīng)該采用更簡明有語義的英文單詞進行組合+
不允許通過1、2绷耍、3等序號進行命名吐限；避免class與id重名
class用于標識某一個類型的對象，命名必須言簡意賅
盡可能提高代碼模塊的復(fù)用褂始，樣式盡量用組合的方式
規(guī)則名稱中不應(yīng)該包含顏色（red/blue）诸典、定位（left/right）等與具體顯示效果相關(guān)的信息。 應(yīng)該用意義命名崎苗，而不是樣式顯示結(jié)果命名
四.屬性簡寫
堅持限制屬性取值簡寫的使用狐粱，過度使用屬性簡寫往往會導(dǎo)致更混亂的代碼。 常見的屬性簡寫濫用包括：
padding胆数，margin肌蜻，font，background等
3.常見問題：
class命名有什么常用的方式幅慌？
4.解決方案
1.原子類命名
這個關(guān)鍵在于拼湊組合.ft{folat：right宋欺；}
2.模塊命名
按照職能劃分命名規(guī)則
nav模塊，可以命名為nav-tittle胰伍、nav-left
3.BEM命名
BEM的優(yōu)點是獨一無二 ，不用擔心自己的樣式被覆蓋
缺點就是class名太長了酸休，修改更新不方便
5.編碼實戰(zhàn)
6.擴展思考
在實際寫代碼的時候到底該如何選擇命名方式骂租？
可以記住常見的class關(guān)鍵詞，在此基礎(chǔ)上特殊化class
也可以參考github上的熱門項目
7.參考文獻
參考一：https://www.tuicool.com/articles/yqUjea
參考二：https://www.douban.com/note/499976405/?type=like
8.課后討論
常用的class關(guān)鍵詞有哪些?
開發(fā)過程中應(yīng)該遵守哪些編碼規(guī)范和class命名規(guī)范斑司？
今天的分享就到這里啦渗饮，歡迎大家點贊、轉(zhuǎn)發(fā)宿刮、留言互站、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始僵缺，找個師兄胡桃，帶你入門，掌控自己學(xué)習的節(jié)奏磕潮，學(xué)習的路上不再迷么湟龋”。
這里是技能樹.IT修真院自脯，成千上萬的師兄在這里找到了自己的學(xué)習路線之景，學(xué)習透明化，成長可見化膏潮，師兄1對1免費指導(dǎo)锻狗。快來與我一起學(xué)習吧?！
