概要

フロントエンド設計方法の1つのBEM(ベム)について。
クラス命名によって汎用的かつ保守的なコードにすることが目的。
要するにclass名の命名規則。

BEMについて

Block , Element , Modifier という3つコンポーネントによってなりたつ。
BEMという名前もこの3つの頭文字から取られている。

class名は Block__Element--Modifir のように命名する。細かいセパレートの命名規則は以下の通り。

BlockとElement __
- e.g.) block__element
ElementとModifier --
- e.g.) block__element--modifir
BlockやElementが2単語以上の場合は -
- e.g.) my-block
ModifierのKeyとValueは _
- e.g.) key_value

<div class="card-holder">
  <div class="card-holder__title"></div>
  <div class="card">
    <div class="card__item"></div>
    <div class="card__item"></div>
  </div>
  <div class="card">
    <div class="card__item"></div>
    <div class="card__item--state_active"></div>
  </div>
</div>

Block

Blockは1つの独立して利用できるモジュール。
例えば"カード"のような1つの塊をモジュールと指す

Element

Blockの中の1つの要素を指す。
Element単体では意味を成さなず、Blockの中へ格納することで意味を成す。

ElementのCSSはElement単体で意味を成すように書く必要がある

good

.block__elem { color: #042; }

Bad

.block .block__elem { color: #042; }

div.block__elem { color: #042; }

Modifier

Block/Elementの状態を表すもの。
他のBlock/Elementと振る舞いや状態が異なることを表す。
また、Modifir単体でclass名を付けてはならず、Block/Elementを同時に存在させる必要がある。

<button class="button button--state-success">
    Success button
</button>

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}

y-ohgi's blog

TODO: ここになにかかく

BEMについて調べた

概要

BEMについて

Block

Element

Modifier

参考