bemを使用してコーディングした際の質問です
<div class="wrapper">
<header class="header">
<div class="container">
<h1 class="logo">
<img src="hoge.png">
</h1>
</div>
</header>
</div>
というソースがあった場合
.wrapper , .header , .containerがブロック
.logoがエレメント
という考え方で良いのでしょうか?
またブロック内にブロック、エレメント内にエレメントとなった場合は
<div class="wrapper__header__container>
とするのでしょうか?
どうか参考までにお聞かせください
みんなの回答 4 件
>wrapper__header__container
それはさすがに。。。containerのさらに下の階層のブロックからでよいとおもう。
BEMの目的として再利用可能なモジュール化だと思うので、もう少し小さい単位でやった方がいいよ。
逆にモジュール化が必要ないようなサイトには向いてない。
<div class="wrapper">
<header class="header">
<div class="header__title">
<h1 class="header__logo">
<img src="hoge.png">
</h1>
</div>
</header>
</div>
こんな感じ
blockは完全に独立してどの場所でも単体で動作可能である必要があるから、例え他のblock内にいようと関係ないわけで、wrapper、header、containerが全てblockであるならば、wrapper__header__container となることはない。
関連するトピックス