BEMのBlock, Element, Modifierについて。 下記の認識で正しいでしょうか？

Question

BEMのBlock, Element, Modifierについて。
下記の認識で正しいでしょうか？

・Block, Elementは必ず親子関係である。

・ Block, ElementとModifierは必ず親子ではなく対等の関係である。

・Blockは必ず存在するが、ElementとModifierはblockなしに存在することはない。

・BlockとElement、BlockとModifierという形はありうる。

・Modifierは、color_lifeのような形で書くのでしょうか？
color-lifeではないのはなぜでしょうか？

例 ライフはテキスト情報としてライフという文字が記載されているということです。
card__label_color_life

BlockとElementは親子関係で、タグの入れ子がひとつしかなければ必ず、一番親がBlockでその子がElementとわかるのですが、
ElementとModifierがいつもどちらか迷います。
良い判断方法はありますか？

＞＞＞
書き方の形式はBlock_Element-Modifierですよね？

私は、Block__Element_Modifierのほうを使っています。
下記画像にcolor_lifeがあります。

下記のスライダーの43ページ目です。
ModifierはBlock__Element__lifeではなく、Block__color_life
https://schoo.jp/class/2690

また、下記のような例も見つけたのですが、
問い合わせフォームそのものが、ブロックになっていますが、ボタンなど要素一つ一つがブロックではないのですか？
どうもブロックとエレメント敷居がわかりません？
そこまで現場でもこだわる必要はないでしょうか？
そのあたりはアバウトでしょうか？

Answer 1

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

上記の本を以前、購入して読んだことがあり、その中でBEMも紹介されていました。この本を２度ほど以前読んだ程度の知識ですが、自分の理解ですと確認されたい事項は合ってるかと思います。

・Modifierは、color_lifeのような形で書くのでしょうか？
color-lifeではないのはなぜでしょうか？

書き方の形式はBlock__Element--Modifierですよね？

疑問点としては、Block__Element--Modi_fierなのか、Block__Element--Modi-fierなのかということでしょうか？

自分の場合はModifierが例えば、「with rounded edge（角丸付き）」であったならば、withRoundedEdgeと書きますね。

なので、例としてはこんな感じになりますかね。

comment__button--withRoundedEdge

ElementとModifierがいつもどちらか迷います。
良い判断方法はありますか？

ModifierはBlockやElementの装飾に使うものだと解釈しています。

例えば、SNSのシェアボタンを載せるブロックがサイト内にあったとした場合、

snsBlock__button--facebook
snsBlock__button--twitter
snsBlock__button--hatena

このような感じになるのかなと思います。

.snsBlock_buttonでボタンの大きさなど各SNSに依存しない装飾を定義しておいて、
.snsBlock_button-sns名のクラスで各SNSに依存する装飾を定義するみたいなイメージです。

他の例を挙げると、

snsBlock__button--large
snsBlock__button--small

のようにmodifierでボタンのサイズを変えるようなものもありますね。

判断方法としてはmodifierを服とかアクセサリーのようなものだと捉えておけば良いのではないでしょうか？

Block__Element--Modifier
お店の中にある__マネキンに--花柄のワンピースを着せる
マリオブラザーズの__マリオを--フラワーマリオにする

Comments

[退会済みユーザー]

ありがとうございます。

私は、Block__Element_Modifierのほうを使っています。
画像などを追加させてもらいました。
モディファイヤーはバリエーション違いということですが、
ブロックとエレメントと同等の関係の場合のみモディファイヤーと考えればよいのですかね。

[退会済みユーザー]

>問い合わせフォームそのものが、ブロックになっていますが、ボタンなど要素一つ一つがブロックではないのですか？

ボタンが非常に複雑なものであればブロックにして良いと思います。
でも、一般的なボタンは問い合わせフォームやカレンダーウィジェットのように構成要素が複雑ではないので、ブロックにするまでではないのかと思います。

>モディファイヤーはバリエーション違いということですが、
>ブロックとエレメントと同等の関係の場合のみモディファイヤーと考えればよいのですかね。

そうだと思います。

自分が読んだ参考書籍では、ElementとModifierの区切りが_ではなく、-である理由は、ElementとModifierの関係が対等であることを視覚的に表現する為とかいてありました。（本当ならば=を区切り文字にした方がより意図が明確だと思いますが、=は区切り文字として使えないので）