What is CSS BEM?
BEMとは、スコープ問題を解決するために名前空間を定義することでよりCSSをメンテナンスしやすくするCSSクラスの命名規則。
BEMはblock, element, modifier の略。blockはプロジェクトを通して再利用可能なスタンドアロンなコンポーネントであり、サブコンポーネント(elements)の名前空間として機能する。modifiersは blockまたはelementが特定の状態にあるとき、または異なる構造やスタイルのときにフラグとして利用される。
/* block component */ .block { } /* element */ .block__element { } /* modifier */ .block__element--modifier { }
マークアップの例
<nav class="navbar"> <a href="/" class="navbar__link navbar__link--active"></a> <a href="/" class="navbar__link"></a> <a href="/" class="navbar__link"></a> </nav>
上のケースの場合、navbar はblock, navbar__linkはelement(navberコンポーネントの外では意味をなさない)、navbar__link--activeはmodifier(navbar__link 要尾とは異なる状態を示す)。
modifiersは冗長なので、多くの場合、modifierとしてis- *フラグを使用される。
<a href="/" class="navbar__link is-active"></a>
これらは、必ずelementに連鎖し、決して単独で使用しない。
.navbar__link.is-active { }
