2

以下のような、レイアウトが共通の色違い要素があったとします。(白黒白黒と続く想定)

<div class="Block">
  <div class="Block__element">白</div>
  <div class="Block__element">黒</div>
  <div class="Block__element">白</div>
  <div class="Block__element">黒</div>
</div>

その際のCSS(scss)を、
cssセレクタ(nth-of-type)でスタイルを当てるのか

.Block {
  &__element {
    &:nth-of-type(odd){
      白色スタイル
    }
    &:nth-of-type(even){
      黒色スタイル
    }
  }
}

とするのか、
クラスにmodifierを付けて

<div class="Block">
  <div class="Block__element--white">白</div>
  <div class="Block__element--black">黒</div>
  <div class="Block__element--white">白</div>
  <div class="Block__element--black">黒</div>
</div>

.Block {
  &__element {
    &--white{
      白色スタイル
    }
    &--black{
      黒色スタイル
    }
  }
}

とした方が良いのか悩みました。
このような場合に限り、nth-of-typeの方が改修などが楽なのではと思いましたが、
BEMで設計している以上、modifierを付けた方が良いのでしょうか。

ご回答、アドバイスのほど、よろしくおねがいいたします。

1

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。