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

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

🐞 参考リンク

BEMをSassで快適に書く方法

🖥 VULTRおすすめ

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

酒と泪とRubyとRailsと