はじめに
本記事はHTML/CSS初心者である筆者がBEM記法を見よう見まねでやった結果、ルール違反となってしまった書き方とその理由、どう書くべきだったのかをまとめたものです。BEMについて知らない初心者の方でも基礎部分の解説を一緒に掲載しているので読んでいただけると幸いです。
BEMの基礎について読み飛ばしたい方はこちら
BEMとは
BEM(Block Element Modifier)はCSSのクラス設計と命名にかかわってくる記法。
Blockの中にはElement、Elementに派生があればModifierを入れ子構造で設計し、クラス管理を容易に行うことができるよう考えられた記法である。
・BEMの基本的な書き方
BEMのクラス命名ではBlock__Element--Modifierといった書き方をとる。__(アンダースコア二つ)はBlockとElementをつなぐ際に使われる、アンダースコアである理由は「下層」を表すため。--(ハイフン二つ)はModifierを書く際に使用される、BlockとElementのバリエーション違いを表す際に使うので「対等」を意味する。
以下にBEM記法で設計したHTML/SCSSの例を示す。
<divclass="content"><pclass="content__text">BEMテスト</p><buttonclass="content__button content__button--large">大きいボタン</button><buttonclass="content__button content__button--small">小さいボタン</button></div>.content{width:600px;height:400px;padding:1em;border:2pxsolid#000000;&__text{font-size:24px;font-style:italic;}&__button{padding:1em;border:2pxsolid#000000;&--large{width:200px;height:100px;}&--small{width:100px;height:50px;}}}Block 一つのくくりであり、以下のElement,Modifierの起点になるもの、一つのコンポーネントElement Blockを構成するための要素 例：画像やテキスト、ボタンModifier Block,Elementのバリエーション違いのもの 例：赤い、小さい、静かな
ModifierをElementの中に入れておらずルール違反となった書き方
<!--...略--><divclass="hobby"><h2class="hobby__text--red">趣味:釣り</h2><!--この行が問題--><p>主にイカ釣りをしています！写真は2年くらい前のもの...</p> <imgclass="hobby__picture"src="image/ika.jpg"></div><!--...略-->Blockの中に直接Modifier付きのElementが入っていることが問題である。
どうしてこのように書いてしまったかというと、hobby__text(Block__Element形式)はhobby__text--red(Block__Element--Modifier形式)の中に含まれており、他の派生を作成する予定がなかったためわざわざ外側のElementは要らないのではと判断してしまった。
これはファイルフォルダのイメージで見ると、一つのフォルダの中に画像、コードなどが乱雑に置かれたようになってしまいBEMの長所が生かされなくなってしまう。
そのため動かないわけではないがBEM記法で設計する以上、避けるべき書き方であると分かった。
↓本来はこうするべき
<divclass="hobby"><divclass="hobby__text"><!--追記した部分--><h2class="hobby__text--red">趣味:釣り</h2><p>主にイカ釣りをしています！写真は2年くらい前のもの...</p></div><!--追記した部分--> <imgclass="hobby__picture"src="image/ika.jpg"></div>Block__Element--Modifier形式のクラス名を定義するには必ず派生元であるBlock__Element形式で書かれたクラスが必要である。
つまりBlock__ElementはBlockの中にいなければならない！ということでもある
Elementの中にElementを定義してしまいルール違反となった書き方
リンク付きの画像を表現するとき、HTMLではimgタグをaタグで囲む。この場合どちらもBlock内の要素と考えられるためElementとして定義したく、以下のコードの__linkというElementの中に__pictureや__textというElementを入れ子で書きたかった。
<divclass="favorite"><divclass="favorite__link"><ahref="#"><imgclass="favorite__link__picture"src="image1.jpg"></a><divclass="favorite__link__text">画像1テキスト</div></div><divclass="favorite__link"><ahref="#"><imgclass="favorite__link__picture"src="image2.jpg"></a><divclass="favorite__link__text">画像2テキスト</div></div><divclass="favorite__texts"><p>画像はそれぞれ実際に撮影したものです！</p><p>画像をクリックすると地図にジャンプ</p></div></div>実はElement内に別のElementを定義してはいけないというBEM記法のきまりがある。
そのため以下のコードのように編集した。
favoriteのBlock内部に別Blockのfavorite-linkを作り、その内部に__pictureや__textというElementを定義する設計とした。
<divclass="favorite"><divclass="favorite-link"><ahref="#"><imgclass="favorite__link__picture"src="image1.jpg"></a><divclass="favorite__link__text">画像1テキスト</div></div><divclass="favorite-link"><ahref="#"><imgclass="favorite__link__picture"src="image2.jpg"></a><divclass="favorite__link__text">画像2テキスト</div></div><divclass="favorite__texts"><p>画像はそれぞれ実際に撮影したものです！</p><p>画像をクリックすると地図にジャンプ</p></div></div>※サイト、画像のリンクや画像テキストの内容は編集しています
設計の際にはいくつBlockが必要なのかを考えてから設計しないと手戻りやリネームなどの面倒な作業が増えてしまう恐れがある。
参考文献
BEMの勉強で参考にさせていただいた記事
一番詳しいCSS設計規則BEMのマニュアル
参考にした本
『Web設計者のためのCSS設計の教科書』 著：谷 拓樹