CSS設計(BEM)

Block ・・・ コンテンツの単位となる塊

Element ... コンテンツを構成する要素(これ自体は単体で動作しないし、コンポーネントにならない)
__でBlock名の後につなぐ

Modifier ・・・コンテンツのあしらいを変えた別パターンの定義
--でElement名の後につなげる

BEMでBlockを作る際に意識すること
子要素だからといって、なんでもかんでもElementにするのではなく、親のBlockを起点に考えたときに、本当に直近の親はそのBlockでいいのかの指標として考えることが重要。
つまり、
Blockの中に新しいコンテンツがある場合はそのコンテンツに新しいBlockを作り、そこを起点に展開する必要を考える。

https://zenn.dev/haniwaman/articles/bf392f397c8db7341881

この場合、cardの部分はcards__itemに加えて、cardというBlockを定義し、card内のコンテンツに対してはcards__itemではなくcardを起点に、card__〇〇と定義する


この記事が気に入ったらサポートをしてみませんか?