はじめに
BEM記法でマークアップする機会があった。
BEMの備忘録。
BEMとは
BEMはCSSの設計手法のひとつ。
もともとロシアのYandex社が開発した「BEM Tools」のこと指すらしい。
いいCSSは、予測がしやすくて、拡張性があり、保守性があることが重要だと言われていて、比較的大規模なプロジェクトだと、複数人で作業することが多く、その際に作業の効率化や品質を担保が出来る。
BEMは、webサイトの各要素をブロック（Block）として考える。
各ブロックの中にはタイトルやテキスト、ボタンなどさまざまな要素（Element）があり、Elementの組み合わせでブロックを構成する。
ブロックやElementは装飾や動作のパターンをModifierというルールで設定する。
CSSの設計手法にはBEM以外にも
- OOCSS
- SMACSS
- FLOCSS
などがある。
BEMの書き方（ルール）
先述の通り、BEMはブロックと要素（エレメント）と装飾を組み合わせて下記のようにクラスを定義する。
Block__Element--Modifier
例えばヘッダー（.header）をブロックとして定義して、その中にメニュー(.menu)があるとすると。
header__menu(Block__Element)
というように書く。
menuはヘッダーを構成するelementにもなるが、menu自体がブロックであると定義もできる。
例えば、下記のようなHTML構造の場合。
<header class="header">
<div class="menu">
<ul class="list">
<li class="listitem"><a href="menu1">メニュー</a></li>
<li class="listitem"><a href="menu2">メニュー</a></li>
<li class="listitem"><a href="menu3">メニュー</a></li>
</ul>
</div>
</header>
BEMだとこう書く。
<header class="header">
<div class="header__menu">
<ul class="header__list">
<li class="header__listitem"><a href="menu1">メニュー</a></li>
<li class="header__listitem"><a href="menu2">メニュー</a></li>
<li class="header__listitem"><a href="menu3">メニュー</a></li>
</ul>
</div>
</header>
ただ、「header__listitem」の中にさらに要素があったり、メニュー以外に色々なパーツが入ってくると、elementとして定義すると読みづらくなる。（個人的に）
なのでmenuをブロックと定義して、
<header class="header">
<div class="header__menu menu">
<ul class="menu__list">
<li class="menu__listitem"><a href="menu1">メニュー</a></li>
<li class="menu__listitem"><a href="menu2">メニュー</a></li>
<li class="menu__listitem"><a href="menu3">メニュー</a></li>
</ul>
</div>
</header>
と書くこともできる。
この設計を考えながらマークアップしていく。
結局、正解はあるけどない
BEM記法はどこをブロックにしてどこをエレメントにするかは実装者やプロジェクトによっても様々。
ブロックにした理由や考え方を説明できるようにしてマークアップをすることが大切！