BEM是一種CSS命名規範。

BEM代表 “塊（block），元素（element），修飾符（modifier）”。
好處：
擺脫特異性的困擾
修複繼承問題
停止擔心命名
在選擇器中，由以下三種符號來表示擴展的關係：

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

/* 常規寫法 */
.list{} 塊
.list .item{} 元素

/* BEM寫法 */
.list{}
.list__item{}

“修飾符”可以理解為一個塊的特定狀態！
/* 常規寫法 */

• Pricing
• Contact

/* BEM寫法 */

• 選中的塊里元素 Pricing
• Contact

CSS命名原則：

1.短命名比長命名好：縮短書寫時間// 推薦.some-intro{...}

2.組合命名比單命名好：明確關係，便於查找位置// .cs-header{...}

面向屬性命名&面向語義命名

面向屬性的命名指選擇器的命名是跟著具體的CSS樣式走的，與項目、頁面、模塊統統沒有關係。例如，比較經典的清除浮動類名.clearfix:
.clearfix:after { content : ''; display: table; clear: both; }

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

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

.header { background-color: #333; color: #fff; }
.logo {font-size: 0; color : transparent;
上述兩種命名方式各有優缺點:

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

css 命名推薦

狀態：

前一個 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

引用：https://juejin.cn/post/7126505567408881677