塊（Block）
/* 常規寫法和BEM寫法相同 */
.list 元素(Element)
塊中的子元素是塊的子元素，並且子元素的子元素在 bem 裏也被認爲是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱作爲前綴。
如上面的例子，li.item 是列表的一個子元素
/* 常規寫法 */
.list{}
.list .item{}
/* BEM寫法 */
.list{}
.list__item{}修飾符(modifier)
一個“修飾符”可以理解爲一個塊的特定狀態
比如
-
多種顏色的按鈕
.btn-list{} .btn-list .btn_red{} .btn-list .btn_green{} .btn-list{} .btn-list__btn_red{} .btn-list__btn_green{} -
被激活的列表項
.list{} .list.select{} .list .item{} .list .item.active{} .list{} .list_select{} .list__item{} .list__item_active{}
書寫原則
- 原則上不會出現
2層以上選擇器嵌套
推薦寫法
<ul class="xxx">
<li class="xxx__item">第一項
<div class="xxx__product-name">我是名稱</div>
<span class="xxx__ming-zi-ke-yi-hen-chang">看類名</span>
<a href="#" class="xxx__link">我是link</a>
<li>
<li class="xxx__item xxx__item_current">第二項 且 當前選擇項
<div class="xxx__product-name">我是名稱</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
<li class="xxx__item xxx__item_hightlight">第三項 且 特殊高亮
<div class="xxx__product-name">我是名稱</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
</ul>.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}
// 嵌套寫法
.xxx__item_current{
.xxx__link{}
}無意義的__
<section class="comments">
<h2 class="comments__title"></h2>
<article class="comments__comment">
<h3 class="comments__comment-title"></h3>
</article>
<article class="comments__comment">
<h3 class="comments__comment-title"></h3>
</article>
<!-- ... -->
</section>用新的塊來保存新元素
<section class="comments">
<h2 class="comments__title"></h2>
<article class="comment">
<h3 class="comment-title"></h3>
</article>
<article class="comment">
<h3 class="comment-title"></h3>
</article>
<!-- ... -->
</section>這樣做更有意義
命名空間
-
.l-: 佈局(layouts) -
.o-: 對象(objects) -
.c-: 組件(components) -
.js: js的鉤子(JavaScript hooks) -
.is-|.has-: 狀態類(state classes) -
.t1|.s1: 排版大小(typography sizes) -
.u-: 實用類(utility classes)