CSS命名——BEM
BEM是什麼
- 中劃線 ：僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連接配接記号。
__ 雙下劃線：雙下劃線用來連接配接塊和塊的子元素
_ 單下劃線：單下劃線用來描述一個塊或者塊的子元素的一種狀态 使用BEM示例對比
修飾符(modifier)
一個“修飾符”可以了解為一個塊的特定狀态！
BEM 的好處
css命名幾大原則
短命名比長命名會更好
因為短命名縮短書寫時間，也減小了css檔案大小！例如這個例子:
// 推薦
.some-intro{...}
// 不推薦
.some-introduction{...}
複制代碼 組合命名比單命名會更好
// 不建議
.header{...}
//推薦
.cs-header{...}
複制代碼 命名彙總推薦
狀态
前一個 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