

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

[code]

    <div class="Block">
      <div class="Block__element">白</div>
      <div class="Block__element">黒</div>
      <div class="Block__element">白</div>
      <div class="Block__element">黒</div>
    </div>
    
[/code]

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

[code]

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

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

[code]

    <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{
          黒色スタイル
        }
      }
    }
    
[/code]

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

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


CC BY-SA 4.0
2019-02-25T03:10:39.147
53010
2019-02-25T03:10:39.147
30065
question
html css
BEMのmodifierについて