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

前端（vue）入門到精通課程：進入學習

CSS命名——BEM

BEM是什么

BEM是一種CSS命名規范?！就扑]學習：css視頻教程】

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

在選擇器中，由以下三種符號來表示擴展的關系：

-   中劃線 ：僅作為連字符使用，表示某個塊或者某個子元素的多單詞之間的連接記號。 __  雙下劃線：雙下劃線用來連接塊和塊的子元素 _   單下劃線：單下劃線用來描述一個塊或者塊的子元素的一種狀態

使用BEM示例對比

Block

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

/* 常規寫法和BEM寫法相同 */ .list

元素(Element)

/* 常規寫法 */    <ul class="list">     <li class="item">Pricing</li>     <li class="item">Contact</li>   </ul>    /* BEM寫法 */       <ul class="list">     <li class="list__item">Pricing</li>     <li class="list__item">Contact</li>   </ul>

/* 常規寫法 */  .list{}  .list .item{}   /* BEM寫法 */  .list{}  .list__item{}

修飾符(modifier)

一個“修飾符”可以理解為一個塊的特定狀態！

/* 常規寫法 */    <ul class="list">     <li class="item">Pricing</li>     <li class="item">Contact</li>   </ul>    /* BEM寫法 */      <ul class="list">     <li class="list__item_active">       Pricing     </li>     <li class="list__item">Contact</li>   </ul>

/* 常規寫法 */  .list{}  .list .item{}  .list .item.active{}   /* BEM寫法 */  .list{}  .list__item{} .list__item_active{}

BEM 的好處

• 擺脫特異性的困擾
• 修復繼承問題
• 停止擔心命名

css命名幾大原則

短命名比長命名會更好

因為短命名縮短書寫時間，也減小了css文件大??！例如這個例子:

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

組合命名比單命名會更好

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

面向屬性的命名和面向語義的命名

面向屬性的命名指選擇器的命名是跟著具體的CSS樣式走的，與項目、頁面、模塊統統沒有關系。例如，比較經典的清除浮動類名.clearfix:

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

面向語義的命名則是根據應用元素所處的上下文來命名的。例如:

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

上述兩種命名方式各有優缺點：

1、面向屬性

• 優點:在于CSS的重用率高，性能最佳，即插即用，方便快捷，開發也極為迅速，因為它省去了大量在 HTML 和CSS文件之間切換的時間。
• 缺點：在于由于屬性單一，其適用場景有限，另外因為使用方便，易被過度使用，從而帶來更高的維護成本。

2、面向語義

• 優點是應用場景廣泛，可以實現非常精致的布局效果，擴展方便；
• 缺點：在于代碼啰唆，開發效率一般，因為所有HTML都需要命名，哪怕是一個10像素的間距。這就導致很多開發者要么選擇直接使用標簽選擇器，要么就選擇一個簡單的類名，然后通過父子關系限定樣式，結果帶來了更糟糕的維護問題。

命名匯總推薦

狀態

前一個    prev 后一個    next 當前的    current  顯示的    show 隱藏的    hide 打開的    open 關閉的    close  選中的    selected 有效的    active 默認的    default 反轉的    toggle  禁用的    disabled 危險的    danger 主要的    primary 成功的    success 提醒的    info 警告的    warning 出錯的    error  大型的    lg 小型的    sm 超小的    xs

布局

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

通用部件

列表    list 列表項  item 表格    table     表單    form 鏈接    link 標題    caption/heading/title 菜單    menu 集合    group 條      bar 內容    content     結果    result

組件

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

語義化小部件

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

功能部件

左浮動    fl 右浮動    fr 清浮動    clear

命名網站推薦

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

參考文檔：

1、張鑫旭的《css選擇世界》

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

（學習視頻分享：web前端）