今からチェックするBEM！
クリスマスではなく冬至を祝ったminamiです。
最近HTML/CSSコーディング界隈その他をにぎわせているBEMという概念。遅まきながら調べてみました。
BEMとは何か？
ロシア最大の検索・ポータルサイトを提供しているYandexで培われた方法論で、Block,Element,Modifier の頭文字をとってBEMと呼ばれています。
BEMはYandexが多くのWebアプリケーションを作りだしてきた過程で生み出されたため、メンテナンス性やチームでの作業を効率良く行う目的で作られています。
ともすれば目新しいクラスの付け方、くらいの見方をされそうなBEMですが、もっとプログラム言語に依存しない、考え方だということがわかります。ありがたいことにBEMとは何か？という部分の公式ドキュメントを日本語訳してくださっている方がいるのでありがたく読ませてもらいました。
- BEMはブロック（Block）、エレメント（Element）、モディファイア（Modifier）の略語である
- BEMはオブジェクト指向のプログラミングに似ている
- 迅速な開発、長期的なメンテ、メンバーの追加に耐えるシステムである
BEMの構成要素
BEMは上記のように、Webサイトをブロック（Block）、エレメント（Element）、モディファイア（Modifier）の組み合わせとして認識します。
Block（ブロック）
ブロックは独立した存在で、アプリケーションの「構成要素」ブロックの中にブロックを含むこともできる。
Element（エレメント）
エレメントはブロックの一部であり、属するブロックの中でしか機能しない。
Modifier（モディファイア）
既存のものと似ているが、見栄えや振る舞いが少しだけ違うブロックやエレメントを作るためのプロパティ。背景色を変えたりボーダーをつけたりなどはモディファイアをつける。
このような考え方をHTMLに適用すると、ulを使ったメニューは下記のようにメニューブロックとそのエレメントであるリストで構成されます。
<ul class="menu">
<li class="menu__item">…</li>
<li class="menu__item">…</li>
</ul>BEMの考え方をHTML/CSSに適用した例では、ブロックとエレメントをアンダースコア2つでつなぎ、モディファイアはハイフン2つでつなぐのが通例になっているようですが、一貫性があるのならばセパレーターは自由です。ただし、ブロック、エレメント、モディファイアは一目見て認識できるわかりやすいものにする必要があります。
とりあえずのまとめ
BEMの考え方の基本のキの部分をまとめてみました。
個人的にHTML/CSSのマークアップでモヤ～っとしていた部分を解消できるのはないかと夢を膨らませております。実践的な部分は追々試していきたいと思います！
