はじめに

この記事はGizumoエンジニア Advent Calendar 2015の13日目の記事です。

株式会社Gizumoのひよっこエンジニアの中村です！

html・cssを書く時のclass名ってすっご〜く悩みます。
わたくし悩んじゃいます！！！

メンテナンス性や拡張性なども考えて
誰が見てもわかりやすいマークアップを心がけたいものです！

ということで今回は命名規則である「BEM」について考えていきたいと思います！

「BEM」ってなあ〜に？？

・Block
・Element
・Modifier
の頭の文字を取っちゃったのが「BEM」です！

ど〜ん！！！

それぞれのclassがどのような関係にあるのかを記述してあげることにより
誰が見てもわかりやすい！を実現しちゃう方法です。

詳しくはそれぞれの役割を見ていきましょう！

『Block』と『Element』ちゃん

『Block』はその名のとおり1つの大きなかたまり（ブロック）を指し
『Element』はそのBlockを構成している部品を指します。
いわゆる親子関係ですね！

わかりやすい例でよく例えられているのが検索フォーム！
「検索フォーム」という『Block』の中にある
・検索ワードの入力欄
・検索ボタン
が『Element』ちゃんです。おぎゃ〜！

『Modifier』

『Modifier』は「Block」または「Element」ちゃんがちょっぴり変化した要素です。

-以上-

あか〜ん！！！

「BEMの書き方」ってなあ〜に？

実際に見てみよう！
こちらが「BEM」の書き方の基本形！

block
block__element
block__element--modifier
block--modifier
block--modifier__element

先ほどの検索フォームの例で言うとこんな感じ！

<div class="search">                               <!--検索フォーム-->
    <input class="search__input" type="text">      <!--検索ワードの入力欄-->
    <input class="search__button" type="submit">   <!--検索ボタン-->
</div>

おお！確かにこれならパッと見ただけで
「searchさん家」の「inputくん」と「buttonちゃん」だ！ってことがわかりますね！

『Element』ちゃんの子供

『Element』ちゃんの中にさらに子要素がある場合…
どうやって書くのが良いのでしょう！？

例えばこんな風に書くのはNG？

Block__Element__Element

数が増えたらえらいこっちゃ〜！

キャメルケースで書けば良いの！？

マルチクラスを使えば良いの！？

それともここが『Modifier』の出番なの！？

んん〜！！！混乱してきたよおおお！！！

（結論が出ませんでした）

さいごに

え！？もう終わりなの！？どうなの！？

色々と調べながら書いていたら時間が足りなくなってしまいました！
疑問系で終わるという新しい感じでごめんなさい…！！！

実際に「BEM」を使いつつ理解を深めながら今度続きを書こうと思います。
（『Modifier』もちゃんと書きます！）
間違っているところがあればビシバシ突っ込み入れてください！

「BEM」はもちろん「OOCSS」も「SASS」の「extend」も気になる…！
マークアッパーへの道のりは長いのであるううう！！！

ここまでお付合いいただきありがとうございました！
一流のエンジニアさんが見たら
「何言ってんじゃ〜！」的な記事になってしまったかと思いますが
温かい目で見守ってあげてください…！

明日は頼れる兄貴！ojimaさんの出番です！
楽しみ〜！！！