CSS設計(BEM)
Block ・・・ コンテンツの単位となる塊
Element ... コンテンツを構成する要素(これ自体は単体で動作しないし、コンポーネントにならない)
__でBlock名の後につなぐ
Modifier ・・・コンテンツのあしらいを変えた別パターンの定義
--でElement名の後につなげる
BEMでBlockを作る際に意識すること
子要素だからといって、なんでもかんでもElementにするのではなく、親のBlockを起点に考えたときに、本当に直近の親はそのBlockでいいのかの指標として考えることが重要。
つまり、
Blockの中に新しいコンテンツがある場合はそのコンテンツに新しいBlockを作り、そこを起点に展開する必要を考える。
この場合、cardの部分はcards__itemに加えて、cardというBlockを定義し、card内のコンテンツに対してはcards__itemではなくcardを起点に、card__〇〇と定義する
この記事が気に入ったらサポートをしてみませんか?