BEMの基本ルール


BEMとCSSの書き方のひとつで、ブロック(Block)、エレメント(Element)、モディファイヤ(Modifier)の頭文字をとったものです。BEMを使うとブロックごとにモジュール化し、名前空間を持たせるようなことができ、わかりやすいCSSを書くことができます。

🐠 BEMの考え方

BEMはCSSのセレクタの命名規則です。迅速な開発と長期的にメンテナンスしやすいコードとなり、再利用性を容易にします。

😀 Block, Element, Modifier

BEMはCSSセレクタをブロック(Block)、エレメント(Element)、モディファイヤ(Modifier)の3つに分けて定義します。

Block(ブロック)

Blockは独立したエンティティで、アプリケーションを構成するパーツです。Blockは1つもしくは、複数で構成します。Blockの名前はユニークにして、パーツごとの独立性を保つようにします。

Element(エレメント)

ElementはBlockの部品を表す要素です。Elementが属するBlock内でのみ使えます。

Modifier(モディファイヤ)

ModifilerはBlockやElementの見た目や振る舞いを変更するプロパティです。違いが少ないBlockやElementを再利用するために使います。

🚌 BEMの書き方

BEMによるCSSの命名ルールは次のとおりです。

/* Blockに対するCSSセレクタ */
block {}
/* Elementに対するCSSセレクタ */
block__element {}
/* BlockのModifierに対するCSSセレクタ */
block_modifier {}
/* Elementに対するCSSセレクタ */
block__element_modifier {}

🚕 CSSでのサンプルコード

BEMの命名ルールにしたがったサンプルコードです。

<div class="articles">
<ul>
<li class="articles__item">.article__item</li>
<li class="articles__item articles__item_active">.articles__item_active</li>
<li class="articles__item">.article__item</li>
</ul>
</div>
.articles {
/* articlesのCSS */
}
.articles__item {
/* articles__itemのCSS */
}
.articles__item_active {
/* articles__item_activeのCSS */
}

🐞 SCSS/SASSを使ったサンプルコード

さきほどのCSSはSCSSを使うことでより短く記述できます。

.articles {
/* articlesのCSS */
&__item {
/* articles__item_のCSS */
&_active {
/* articles__item_activeのCSS */
}
}
}

SASS記法でも同じく短く直感的な記述ができます。

.articles
/* articlesのCSS */
&__item
/* articles__item_のCSS */
&_active
/* articles__item_activeのCSS */

さらに直感的な記述ができることがわかります。

🏀 参考リンク

📚 おすすめの書籍