BEMのmodifierについて
以下のような、レイアウトが共通の色違い要素があったとします。(白黒白黒と続く想定)
<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を付けた方が良いのでしょうか。
ご回答、アドバイスのほど、よろしくおねがいいたします。