はじめに

BEMとは？

BEM - Block Element Modifierは、フロントエンド開発で再利用可能なコンポーネントとコード共有を作成するのに役立つ方法論です。 方法論なんですねー。

特徴

Easy

使うにはBEMの命名規則をhtmlとcssに当てはめるだけです。

Modular

モジュール化します。モジュール化とは？独立化っことです。 独立化することにより再利用が簡単にできるようになります。

Flexible

方法論やツールを組み替えたりフレキシブルに使用することができます。

どっから読めばいいの？

イントロダクション

GEMという方法論の論法についての説明。 この方法論が出来上がった背景も交えて、「そもそも」の部分についての説明があります。 また他のCSS設計方法論との比較もあります！ http://getbem.com/introduction/

ネーミング

イントロダクションが「そもそも」のところについての説明なら、 こちらは「実際」の使い方についての説明。 基本的にイントロダクションとネーミングの２つを読めばOKな感じです。割と負担なくていい感じですね。 http://getbem.com/naming/

FAQ

よくある質問と回答。 自分が思った疑問点が書いてあることあります。（そりゃそうだろ） http://getbem.com/faq/

使用例

実際にコードを見たほうが雰囲気がつかみやすいと思います。 こんな感じです。 パット見ただけだとやや冗長な印象を受けますね。

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

参考

http://getbem.com/