BEMとは #Rails

BEM

多くの開発者が取り入れているCSS設計(CSSを記述する時のルール)です。BEMは、厳格なクラスの命名規則が特徴です。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。

クラスの命名が簡単になる

Block、Element、Modifierのみでクラスを命名することで、クラス名に悩むことがなくなります。

要素の再利用がしやすくなる

共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければなりませんでした。しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなります。
HTML構造に依存しないことで、要素の再利用がしやすくなります。

Block

ある要素の大元となるブロック要素です。Blockの命名には名詞を使用します。ElementやModifierは、Blockを起点に命名されます。

Element

Blockに属する子要素です。1つ以上のElementによって、Blockは構成されています。Elementの命名には名詞を使用します。

Modifier

Blockまたは、Elementに特別な修飾をする要素です。Modifierの命名には形容詞を使用します。

命名規則

BlockとElementをつなぐ場合は、アンダースコア2つでつなぎます。
Modifierにつなぐ場合は、ハイフン2つでつなぎます。
【例】

XXXX.html

nav class='HeaderNav'>
  <ul class='Menu'>
    <li class='Menu__list'>TOP</li>
    <li class='Menu__list'>CONTACT</li>
    <li class='Menu__list Menu__list--backBlack'>ABUOT US</li>
    <li class='Menu__list'>SERVICE</li>
   </ul>
</nav>

navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとしました。
このようにクラス名の単語数が2つ以上の場合はキャメルケースまたはスネークケースでつなぎます。
ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をMenuとしました。
liはMenuの子要素なので、クラス名をMenu_listとしました。
liのうちABOUT USだけは背景色を黒くしたいので、クラス名をMenu_list--backBlackとしました。
Modifierはこのように特定の部品を修飾したい時に使用します。
上記に対したSass

XXXX.scss

.Menu {
  list-style: none;
  &__list {
    background-color: #3BD1EC;
    color: #FFF;
    float: left;
    font-size: 30px;
    padding: 2% 1%;
    text-align: center;
    width: 23%;
    &--backBlack {
      background-color: #000;
      color: #3BD1EC;
    }
  }
}

Modifierを使用した部分だけ背景色を黒くできました。