はじめに

BEMアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで機能し、同じ言語を話すことを保証します。 適切な名前を使用すると、Webサイトのデザインの変更に備えることができます。

大前提

No tag name or ids いずれもクラスだけをセレクタとして使用します。

Block

概要

単独で意味のあるスタンドアロンエンティティをカプセル化します。 ブロックは入れ子になって相互に作用することができますが、意味的には同じままです。 優先順位や階層はありません。 DOM表現のない全体的な実体（コントローラーやモデルなど）もブロックにすることができます。

命名規則

ブロック名は、ラテン文字、数字、およびダッシュで構成することができます。(ダッシュいいんですねー！！まぁユニークにしないといけないからねー) CSSクラスを形成するには、名前空間の短い接頭辞を追加します。

例:block

Element

概要

ブロックの一部であり、独立した意味はありません。 どの要素も意味的にそのブロックに結び付けられています。

命名規則

エレメント名は、ラテン文字、数字、ダッシュ、およびアンダースコアで構成されます。 CSSクラスは、ブロック名、2つのアンダースコア、および要素名として構成されます。

例: block__elem

Modifier

概要

ブロックまたは要素上のフラグ。 外観、動作、または状態を変更するためにそれらを使用してください。

命名規則

モディファー名は、ラテン文字、数字、ダッシュ、およびアンダースコアで構成されます。

CSSクラスは、ブロック名または要素名に2つのダッシュ （block—mod または .block__elem—mod もしくは .block—color-black と .block—color-red）を加えた形式で構成されます。

複雑なモディファーの中のスペースはダッシュに置き換えられます。(例--color-red)

なるほどねー。必ずしもブロック-要素-モディファーにする必要ないのね。 このモディファーがフレキシブルな部分を担当している感じね。

Example

使用例

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