如果使用 CSS 有一段時(shí)間，那么您就會(huì)知道繼承、特異性和命名是一些最難處理的事情。由于所有 CSS 都是全局的，隨著代碼庫(kù)的增長(zhǎng)，防止樣式相互沖突并導(dǎo)致意外副作用變得越來(lái)越困難！下面本篇文章給大家分享一些css命名小技巧，讓我們的代碼優(yōu)雅又耐看，希望對(duì)大家有所幫助！

前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)

CSS命名——BEM

BEM是什么

BEM是一種CSS命名規(guī)范。【推薦學(xué)習(xí)：css視頻教程】

BEM代表 “塊（block），元素（element），修飾符（modifier）”。

在選擇器中，由以下三種符號(hào)來(lái)表示擴(kuò)展的關(guān)系：

-   中劃線 ：僅作為連字符使用，表示某個(gè)塊或者某個(gè)子元素的多單詞之間的連接記號(hào)。 __  雙下劃線：雙下劃線用來(lái)連接塊和塊的子元素 _   單下劃線：?jiǎn)蜗聞澗€用來(lái)描述一個(gè)塊或者塊的子元素的一種狀態(tài)

使用BEM示例對(duì)比

Block

如下面的例子，li.item 是列表的一個(gè)子元素

/* 常規(guī)寫(xiě)法和BEM寫(xiě)法相同 */ .list

元素(Element)

/* 常規(guī)寫(xiě)法 */    <ul class="list">     <li class="item">Pricing</li>     <li class="item">Contact</li>   </ul>    /* BEM寫(xiě)法 */       <ul class="list">     <li class="list__item">Pricing</li>     <li class="list__item">Contact</li>   </ul>

/* 常規(guī)寫(xiě)法 */  .list{}  .list .item{}   /* BEM寫(xiě)法 */  .list{}  .list__item{}

修飾符(modifier)

一個(gè)“修飾符”可以理解為一個(gè)塊的特定狀態(tài)！

/* 常規(guī)寫(xiě)法 */    <ul class="list">     <li class="item">Pricing</li>     <li class="item">Contact</li>   </ul>    /* BEM寫(xiě)法 */      <ul class="list">     <li class="list__item_active">       Pricing     </li>     <li class="list__item">Contact</li>   </ul>

/* 常規(guī)寫(xiě)法 */  .list{}  .list .item{}  .list .item.active{}   /* BEM寫(xiě)法 */  .list{}  .list__item{} .list__item_active{}

BEM 的好處

• 擺脫特異性的困擾
• 修復(fù)繼承問(wèn)題
• 停止擔(dān)心命名

css命名幾大原則

短命名比長(zhǎng)命名會(huì)更好

因?yàn)槎堂s短書(shū)寫(xiě)時(shí)間，也減小了css文件大?。±邕@個(gè)例子:

//  推薦 .some-intro{...}  // 不推薦 .some-introduction{...}

組合命名比單命名會(huì)更好

// 不建議 .header{...}  //推薦 .cs-header{...}

面向?qū)傩缘拿兔嫦蛘Z(yǔ)義的命名

面向?qū)傩缘拿高x擇器的命名是跟著具體的CSS樣式走的，與項(xiàng)目、頁(yè)面、模塊統(tǒng)統(tǒng)沒(méi)有關(guān)系。例如，比較經(jīng)典的清除浮動(dòng)類(lèi)名.clearfix:

.clearfix:after { content : ''; display: table; clear: both; }

面向語(yǔ)義的命名則是根據(jù)應(yīng)用元素所處的上下文來(lái)命名的。例如:

.header { background-color: #333; color: #fff; } .logo {font-size: 0; color : transparent;}

上述兩種命名方式各有優(yōu)缺點(diǎn)：

1、面向?qū)傩?/p>

• 優(yōu)點(diǎn):在于CSS的重用率高，性能最佳，即插即用，方便快捷，開(kāi)發(fā)也極為迅速，因?yàn)樗∪チ舜罅吭?HTML 和CSS文件之間切換的時(shí)間。
• 缺點(diǎn)：在于由于屬性單一，其適用場(chǎng)景有限，另外因?yàn)槭褂梅奖?，易被過(guò)度使用，從而帶來(lái)更高的維護(hù)成本。

2、面向語(yǔ)義

• 優(yōu)點(diǎn)是應(yīng)用場(chǎng)景廣泛，可以實(shí)現(xiàn)非常精致的布局效果，擴(kuò)展方便；
• 缺點(diǎn)：在于代碼啰唆，開(kāi)發(fā)效率一般，因?yàn)樗蠬TML都需要命名，哪怕是一個(gè)10像素的間距。這就導(dǎo)致很多開(kāi)發(fā)者要么選擇直接使用標(biāo)簽選擇器，要么就選擇一個(gè)簡(jiǎn)單的類(lèi)名，然后通過(guò)父子關(guān)系限定樣式，結(jié)果帶來(lái)了更糟糕的維護(hù)問(wèn)題。

命名匯總推薦

狀態(tài)

前一個(gè)    prev 后一個(gè)    next 當(dāng)前的    current  顯示的    show 隱藏的    hide 打開(kāi)的    open 關(guān)閉的    close  選中的    selected 有效的    active 默認(rèn)的    default 反轉(zhuǎn)的    toggle  禁用的    disabled 危險(xiǎn)的    danger 主要的    primary 成功的    success 提醒的    info 警告的    warning 出錯(cuò)的    error  大型的    lg 小型的    sm 超小的    xs

布局

文檔    doc 頭部    header(hd) 主體    body     尾部    footer(ft)     主欄    main 側(cè)欄    side     容器    box/container

通用部件

列表    list 列表項(xiàng)  item 表格    table     表單    form 鏈接    link 標(biāo)題    caption/heading/title 菜單    menu 集合    group 條      bar 內(nèi)容    content     結(jié)果    result

組件

按鈕        button(btn) 字體        icon 下拉菜單    dropdown 工具欄      toolbar 分頁(yè)        page 縮略圖      thumbnail 警告框      alert 進(jìn)度條      progress 導(dǎo)航條      navbar 導(dǎo)航        nav     子導(dǎo)航      subnav 面包屑      breadcrumb(crumb)     標(biāo)簽        label 徽章        badge 巨幕        jumbotron 面板        panel 洼地        well 標(biāo)簽頁(yè)      tab 提示框      tooltip 彈出框      popover 輪播圖      carousel 手風(fēng)琴      collapse  定位浮標(biāo)    affix

語(yǔ)義化小部件

品牌        brand 標(biāo)志        logo 額外部件    addon 版權(quán)        copyright 注冊(cè)        regist(reg) 登錄        login 搜索        search     熱點(diǎn)        hot 幫助        help 信息        info 提示        tips 開(kāi)關(guān)        toggle 新聞        news 廣告        advertise(ad) 排行        top     下載        download

功能部件

左浮動(dòng)    fl 右浮動(dòng)    fr 清浮動(dòng)    clear

命名網(wǎng)站推薦

codelf：https://unbug.github.io/codelf

參考文檔：

1、張?chǎng)涡竦摹禼ss選擇世界》

2、https://www.cnblogs.com/qianxiaox/p/13816077.html

（學(xué)習(xí)視頻分享：web前端）