每次寫HTML結(jié)構(gòu)涉及到CSS命名時，都要掙扎一番。關(guān)于CSS命名的規(guī)范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在這里面最火的應(yīng)該算BEM了。本文將詳細(xì)介紹CSS命名

【BEM】

說起CSS命名，當(dāng)然要提到BEM。BEM的意思就是B模塊(block)、E元素(element)、M修飾符(modifier)。模塊和子元素之間用兩個下劃線分隔，子元素和修飾符之間用兩個中劃線分隔

??關(guān)于子元素E，有兩種寫法。一種是按照層級嵌套來寫，如block-ele1-son-inner，但是這樣寫會導(dǎo)致命名過長；另一種是扁平化，一個模塊B下的所有子元素，無論相互層級如何，都直接連接B，如block-inner，但是這樣就無法表示層級關(guān)系，命名時也可能會出現(xiàn)沖突

??BEM的命名是很好的，不然也不能成為最流行的命名方法。但是，BEM對子元素的命名，無論是層級長命名還是扁平化短命名，都有缺陷

【NEC】

相較于BEM以模塊B為頂級元素，子元素類名中包含繼承關(guān)系的命名，網(wǎng)易的NEC規(guī)范使用后代選擇器方式

??NEC將元素分為了5類：布局(grid)(.g-)；模塊(module)(.m-)；元件(unit)(.u-)；功能(function)(.f-)；皮膚(skin)(.s-)；狀態(tài)(.z-)。而后代選擇器不需要完整表現(xiàn)結(jié)構(gòu)樹層級，盡量能短則短

.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}

個人認(rèn)為，網(wǎng)易對于元素分類的做法很好。關(guān)于一些全局可復(fù)用的功能性的模塊進行區(qū)分，結(jié)構(gòu)更為清晰。但是，對于使用后代選擇器的方式，個人不太認(rèn)同。當(dāng)嵌套層級較深時，命名沖突依舊是一個問題

【JD】

京東的命名規(guī)則采用表示層級嵌套關(guān)系的長命名。當(dāng)子孫模塊超過4級或以上的時候，考慮在祖先模塊內(nèi)具有識辨性的獨立縮寫作為新的子孫模塊

 div >
 京東這種因子元素名字過長而采用首字母縮寫的做法非常贊，至今市面上沒有其他更好的解決長命名的方案
 
命名方式
【后代選擇器還是類名】
 關(guān)于CSS命名，最大的爭論就是使用后代選擇器還是使用類名。以下例所示
 ul >
 如果采用第一種長類名的方式，為 li 元素設(shè)置樣式，只需如下設(shè)置即可
.list-item{}
 如果采用第二種短類名的方式，則為 li 元素設(shè)置樣式，需如下設(shè)置
.list .item{}
 如果采用第三種后代選擇器的方式，則為 li 元素設(shè)置樣式，需如下設(shè)置
.list li{}
 如果從簡易角度來看，第三種后代選擇器的方式最簡單，無需花時間去給子元素起名，且在sass中書寫很容易
.list{ li{}}
 但是，它有一個很嚴(yán)重的問題，就是如果HTML結(jié)構(gòu)層級較深，往往出現(xiàn)選擇器層級過長，如.list li span a{}
 而且，因為后代選擇器強烈地依賴HTML結(jié)構(gòu)，為了避免因為少寫一層結(jié)構(gòu)，導(dǎo)致選擇器特殊性降低，樣式無法生效的情況，也不得不這樣寫
 一個不得不提的問題是，CSS選擇器的解析順序是從右到左。而使用后代選擇器.list li{}，瀏覽器需要遍歷出所有的li，再找出.list下的li，效率是最低的
 因此，個人認(rèn)為第三種后代選擇器的方式并不是好選擇
 下面介紹第二種短類名的方式
 1、選擇器解析效率比第三種方式好，畢竟.item比li的范圍小很多
 2、短類名.list .item同樣存在依賴HTML結(jié)構(gòu)的情況，很可能出現(xiàn)選擇器層級過長
 3、使用較簡易，在sass中書寫容易，且起名也較簡單
 4、由于給li增加了類名，于是增加了HTML文件大小
 最后介紹第三種長類名的方式
 這種方式的選擇器效率最高，因為.list-item這個類型頁面中只出現(xiàn)一次，可類比于id選擇器的解析速度
 由于使用長類名的方式，可以完全不使用后代選擇器，則無需考慮選擇器特殊性較低，樣式無法生效的情況，也不會出現(xiàn)選擇器層級過長，因為它僅有一級
 但是，相應(yīng)地，它最大的缺點是類名較長，大大地增加了HTML文件大小。于是，可借鑒京東，當(dāng)子孫模塊超過3級時，采用首字母縮寫，并將縮寫后首字母大寫的做法，在如將.list-item-link-title縮寫為.Lil-title
 最終，選擇可縮寫的長類名作為CSS命名的主要方式
【分隔符】
 一般地，html' target='_blank'>classname分隔符有3種，中劃線-，下劃線_，以及首字母大寫，以分隔list和item為例
//中劃線list-item//下劃線list_item//首字母大寫listItem
 1、中劃線
 中劃線可以用來表示層級關(guān)系
 div >
 2、下劃線
 下劃線可以用來表示不同的狀態(tài)
 div >
 3、首字母大寫
 首字母大寫可以用來表示因為樣式的需要，而不得不增加的HTML結(jié)構(gòu)。一般地，如果在外層增加結(jié)構(gòu)，可以增加Wrap，在內(nèi)層增加結(jié)構(gòu)，可以增加Inner，且不影響原先的classname的命名
 div >
【組件】
 通過上面的長命名方式和分隔符的使用，解決了基礎(chǔ)結(jié)構(gòu)的命名。但是，在頁面中，很可能出現(xiàn)一些組件的應(yīng)用，這些組件可以復(fù)用到頁面的多個位置。這時，再使用上面的方式就不太合適
 于是，可以以m-為前綴，來表示這是一個組件
 div >
 
命名推薦
 有了合適的命名方式，還需要語義化命名，且有不影響語義的情況下，可以簡寫
【布局】
文檔 doc頭部 header(hd)主體 body 尾部 footer(ft) 主欄 main側(cè)欄 side 容器 box/container
【通用部件】
列表 list列表項 item表格 table 表單 form鏈接 link標(biāo)題 caption/heading/title菜單 menu集合 group條 bar內(nèi)容 content 結(jié)果 result
【組件】
按鈕 button(btn)字體 icon下拉菜單 dropdown工具欄 toolbar分頁 page縮略圖 thumbnail警告框 alert進度條 progress導(dǎo)航條 navbar導(dǎo)航 nav 子導(dǎo)航 subnav面包屑 breadcrumb(crumb) 標(biāo)簽 label徽章 badge巨幕 jumbotron面板 panel洼地 well標(biāo)簽頁 tab提示框 tooltip彈出框 popover輪播圖 carousel手風(fēng)琴 collapse 定位浮標(biāo) affix
【語義化小部件】
品牌 brand標(biāo)志 logo額外部件 addon版權(quán) copyright注冊 regist(reg)登錄 login搜索 search 熱點 hot幫助 help信息 info提示 tips開關(guān) toggle新聞 news廣告 advertise(ad)排行 top 下載 download
【功能部件】
左浮動 fl右浮動 fr清浮動 clear
【狀態(tài)】
前一個 previous后一個 next當(dāng)前的 current顯示的 show隱藏的 hide打開的 open關(guān)閉的 close選中的 selected有效的 active默認(rèn)的 default反轉(zhuǎn)的 toggle禁用的 disabled危險的 danger主要的 primary成功的 success提醒的 info警告的 warning出錯的 error大型的 lg小型的 sm超小的 xs
 
實踐
 header >
 關(guān)于CSS命名，并沒有最佳實踐之說，根據(jù)項目的復(fù)雜程序進行合適的命名才是可取的 
 歡迎交流 
以上就是CSS命名規(guī)則的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。