WEB開発デザイン 2017/12/25

BEM方式でわかるおせちのマークアップ方法

青柳祐美

webサイトの構成を大きな重箱と考えると
コンテンツというおかずが入ったおせちみたいなものなのではないか、と。
思い立った私は、BEM方式でおせちをマークアップしてみようと思いました。

今回マークアップするおせちはこちら

出典：illust AC

基本としてはBEM方式の内のBlock、Elementという概念と、
ひ孫要素以降の　.el_要素の名前　という命名規則、
装飾のみ変更時の　.is-装飾名　という命名規則を使います。

目的としては、BEM方式の考え方・概念を身につけるための練習です。

BEM方式についての解説と
弊社独自のオリジナル命名規則については

CSSの命名規則にBEM方式はどうだったか

こちらもぜひ！

マークアップしてみる

このおせちは2段なので、それぞれの段を囲みましょう。
1段目を、stage01というBlock名にします。2段目はstage02です。

おせちはおかずが入っています。
このおかずにもそれぞれBlock名をつけましょう。

1段目/かまぼこと伊達巻き

nerimono(練りもの) というブロックは、
かまぼこと伊達巻きというElementで構成されています。

そのためBEM方式にのっとると、
かまぼこをnerimono_kamaboko
伊達巻きをnerimono_date と名付けることができます。

さらに、これらは何切れかのElementで構成されていると考えると、
かまぼこの一切れはnerimono_kamaboko_piece
伊達巻きの一切れはnerimono_date_piece と名付けることができます。

さて、かまぼこをよく見ると、ピンクと白がありますね。
同じnerimono_kamaboko_pieceでも、装飾が違うので、
is-pink　をピンクのかまぼこにつけましょう。

CSS上では

.nerimono_kamaboko_piece{
	background-color:#fff;
}

.nerimono_kamaboko_piece .is-pink{
	background-color:#f4aa9b;
}

とすればピンクになりますね。

まとめるとこうなります。

<div class="stage01">
　　　　<div class="nerimono">
　　　　　　　　<div class="nerimono_date">
 　　　　　　　　　　　　<span class="nerimono_date_piece">伊達巻き</span>
 　　　　　　　　　　　　<span class="nerimono_date_piece">伊達巻き</span>
 　　　　　　　　　　　　<span class="nerimono_date_piece">伊達巻き</span>
 　　　　　　　</div>
 　　　　　　　<div class="nerimono_kamaboko">
 　　　　　　　　　　　　<span class="nerimono_kamaboko_piece">かまぼこ</span>
 　　　　　　　　　　　　<span class="nerimono_kamaboko_piece is-pink">ピンクかまぼこ</span>
 　　　　　　　　　　　　<span class="nerimono_kamaboko_piece">かまぼこ</span>
　　　　　　　　　　　　 <span class="nerimono_kamaboko_piece is-pink">ピンクかまぼこ</span>
 　　　　　　　　　　　　<span class="nerimono_kamaboko_piece">かまぼこ</span>
 　　　　　　　</div>
 　　</div>
</div>