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__itemli>
<li class="articles__item articles__item_active">.articles__item_activeli>
<li class="articles__item">.article__itemli>
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 */

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

🐞 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍