この記事はOIC ITCreate Club Advent Calendar 2016 16日目の記事です。

はじめに

ITCreate Club Advent Calendar 2016 16日目を担当させていただきます、@t-kusakabeです。
前回Sassについての記事を書かせていただいたので今回はBEMについて書かせいただこうと思います。

BEMにってなに？

BEMとは、Block、Element、Modifierの頭文字をとったフロントエンド設計方法のひとつです。
通常CSSを書く時、適当にclass名をつけたりデザイン重視になりすぎる事でHTML上のclass名が何をしているのかわからない、又はCSSを書いた本人しか理解できない状態になりがちです。(僕だけかもしれませんが...)
BEMは厳格な命名規則を設ける事で、長期的でかつ再利用しやすいCSSを記述するための設計方法です。

BEMの構成要素

Block、Element、Modifierの3つでBEMは構成されています。(頭文字をとっているので当然ですね)

Blockとは要素の大元になる部分です。後述するElementやMOdifierはこのBlockに属する事になります。

ElementはBlockを親とする要素です。全てのElementはある特定のBlockに属します。

ModifierはBlock、Elementに対して装飾を行う要素です。

命名規則

BEMには厳しい命名規則があります。

BlockとElementをつなぐときは、アンダースコア2つでつなぐ (Block__Element)
Modifierにつなぐ場合は、ハイフン2つでつなぐ (Block--Modifier, Element--Modifier)

基本的にはこの二つを守っていればokです。

実際に試してみましょう。
全ての要素はBlockに属するのでまずBlockを定義します。
今回はfooというBlockを作成することにします。
(わかりやすくするために適当にCSSを当てています)

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>sample</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>

  <body>
    <div class='foo'>
    </div>
  </body>
</html>

次にElementを定義します。Blockという塊の中にある要素なのでBlockの中に定義します。ElementとBlockを繋げるときはアンダースコア2つでつなぐのでfoo__barとします。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>  </title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>

  <body>
    <div class='foo'>
      <div class='foo__bar'> 
      </div>
      <div class='foo__bar'> 
      </div>
      <div class='foo__bar'> 
      </div>
    </div>
  </body>
</html>

次にModifierです。Modifierを繋げるときはハイフン2つで繋げるので、foo__bar__redになります。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>  </title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>

  <body>
    <div class='foo'>
      <div class='foo__bar'> 
      </div>
      <div class='foo__bar foo__bar--red'> 
      </div>
      <div class='foo__bar'> 
      </div>
    </div>
  </body>
</html>

Sassと組み合わせる

普通にBEMを使うだけだと,class名が長くなるだけなので不便です。
しかし、Sassの & と組み合わせることで長いclass名を省略することができます。

test.css

.foo {
}

.foo__bar {
}

.foo__bar--red {
}

通常のCSSがSassと組み合わせると...

test.scss

.foo {
  &__bar {
    &--red {
    }
  }
}

class名を短縮できる！！！
SassとBEMを組みわせることで、わかりやすく再利用しやすいCSSが書けるようになります。

まとめ

BEMを使うことでclass名だけで何をしているのかある程度わかるのでチーム開発にも最適です！
興味を持たれた方は是非勉強してみください。