簡(jiǎn)介
BEM 的意思就是塊（block）藕夫、元素（element）嫂粟、修飾符（modifier）降瞳，是由 Yandex 團(tuán)隊(duì)提出的一種前端命名方法論昔瞧。這種巧妙的命名方法讓你的 CSS 類對(duì)其他開(kāi)發(fā)者來(lái)說(shuō)更加透明而且更有意義吟吝。BEM 命名約定更加嚴(yán)格菱父，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開(kāi)發(fā)一個(gè)耗時(shí)的大項(xiàng)目剑逃。
重要的是要注意浙宜，這里使用的基于 BEM 的命名方式是經(jīng)過(guò) Nicolas Gallagher 修改過(guò)的。
命名約定
.block {}
.block__element {}
.block--modifier {}
之所以使用兩個(gè)連字符和下劃線而不是一個(gè)蛹磺，是為了讓 block 可以用單個(gè)連字符來(lái)界定粟瞬，如：
.site-search {} /* 塊 */
.site-search__field {} /* 元素 */
.site-search--full {} /* 修飾符 */
舉個(gè)栗子
- block__element：塊里的元素，如：nav（block）里的 a 標(biāo)簽（element）萤捆；
- block__element--modifier：塊里的元素的狀態(tài)裙品、屬性或修飾，如：nav 里的 a 標(biāo)簽俗或，有 active市怎、hover、normal 3 種狀態(tài)（modifier）辛慰。
<nav class="nav">
<a href="#" class="nav__item nav__item--active">當(dāng)前狀態(tài)</a>
<a href="#" class="nav__item nav__item--hover">鼠標(biāo)移上時(shí)的狀態(tài)</a>
<a href="#" class="nav__item nav__item--normal">正常狀態(tài)</a>
</nav>
.nav {
&__item {
&--active {
}
&--hover {
}
&--normal {
}
}
}
命名空間
可以參考 BlazeUI 的命名規(guī)范：https://github.com/BlazeUI/blaze 区匠。
- o-：表示一個(gè)對(duì)象（Object），如 .o-layout帅腌。
- c-：表示一個(gè)組件（Component）辱志，指一個(gè)具體的、特定實(shí)現(xiàn)的 UI狞膘。如 .c-avatar揩懒。
- u-：表示一個(gè)通用工具（Utility），如 .u-hidden挽封。
- t-：表示一個(gè)主題（Theme）已球，如 .t-light。
- s-：表示一個(gè)上下文或作用域（Scope），如 .s-cms-content智亮。
- is-忆某，has-：表示一種狀態(tài)或條件樣式。如 .is-active
- _：表示一個(gè) hack阔蛉，如 ._important弃舒。
- js-：表示一個(gè) JavaScript 鉤子。如 .js-modal状原。
- qa-：表示測(cè)試鉤子聋呢。
我們團(tuán)隊(duì)新增了自己的一些規(guī)范，僅供參考：
- p-：表示一個(gè)頁(yè)面（page）颠区，如 .p-home削锰。
- b-：表示頁(yè)面（page）內(nèi)的塊（block），如 .b-content毕莱。
- cc-：表示組件內(nèi)的組件器贩，該組件樣式僅在父組件作用域下有效，如 .cc-list朋截。
- c{xxx}：表示顏色蛹稍，如 .c1。
- bgc{xxx}：表示背景色部服，如 .bgc1唆姐。
- bdc{xxx}：表示邊框顏色，如 .bdc1饲宿。
- fs{xxx}：表示字體大小，如 .fs24胆描。
總結(jié)
- B（block）：某一塊展示/功能區(qū)域瘫想，比如：.nav。
- E（element）：這塊展示/功能區(qū)域里的某個(gè)元素昌讲，比如: .nav__item国夜。
- M（modifier）：某個(gè)元素或者某個(gè)塊的狀態(tài)，比如：.nav--hide, .nav__item--active 等短绸。
