BEMとHamlでViewをマークアップ

BEMの命名規則？大体理解できたと思い、いざHamlでViewを書いてみると、、
ん？？　なんかめっちゃclass名長いんですけど！w
的な感じでおかしなことになってしまったので、備忘録として簡単にまとめておきます。

BEMとは

Block Element Modifierの略。
classの命名規則の一種で、多くの開発者が取り入れているCSS設計。
命名が簡単になり、メンテナンスが楽になるという利点がある。
Block →　大きな括り（ブロック）
Element　→　大きな括りの中にある要素（Blockの子要素）
Modifier　→　BlockやElementのバージョン違い（装飾）

BEMの命名規則

block__element--modifierという表記が元となる。
block　→　elementを繋ぐ際は__(アンダースコア２つ)で繋ぐ。
block__element　→　modifireを繋ぐ際は--(ハイフン２つ)で繋ぐ。
block　→　modifierを繋ぐ際も同様。
単語と単語を繋ぐ　→　-(ハイフン１つ)で繋ぐ。mein-contentsなど
※elementは、大きな括りの中にある要素なので、必ず親要素にBlockを持つ

index.html.haml

/ヘッダーメニューを例にすると、、
/「menu」はヘッダーメニュー全体の大きな括り（block）
/「menu__list」はヘッダーメニュー全体の中にあるメニューリスト(element)
/「menu__list--red」は赤い文字のメニューリスト(modifier)

.menu →（block）
  .menu__list　→（block__element）
    MENU
  .menu__list
    HOME
  .menu__list
    ABOUT
  .menu__list--red　→（block__element--modifier）
    MAP

ここで、私がハマってしまった内容を紹介します。。

__（アンダースコア）を使えるのは１回のみ

blockからelementを繋ぐのは一回のみというのがルール。
前のblockは切って、繋いでいたelementをblockとし、blockは一つだけにする。
mein-contents__menu__list　→NG
menu__list　→OK
block__element--modifierの表記の元に、
最初の親要素から馬鹿正直に全てつらつらと繋げ、classを命名するのはNG。
というかこんなことしてたらめちゃくちゃclass名長くなります。w

まとめ

BEMの命名規則、、
最初、理解したように思えていざ書いてみると、逆にややこしくない？？とか思っていましたが、
慣れてくるとかなり便利というか、可読性が上がります。
誰が見てもわかるclass名にすることは、チームで開発を進める上でかなり大事なことだと思います。
（一人で開発を進める際にも、メンテナンスがかなり楽になると思います）
今回はHamlで実装する際を例にしてまとめましたが、
BEMはCSS設計の為のものなので、次回はCSS設計について書きたいと思います！

参考サイト

[Webサイト制作]BEMについての命名規則などのまとめ - Code School
BEM(MindBEMding)によるclass命名規則の概要を学ぼう | もえちゃんと