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 */

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

🗻 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)