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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519307.html
標籤：其他
上一篇：WebSocket的簡單使用
下一篇：$router.push({name:component})與$router.push(‘pathName’)的小區別