ネストされたルールの修飾子のオーバーライド方法

Question

BEM特異性に関する質問があります。私は可能な限り最良の方法でその方法論を使用したいと思っています。私は色を適用する見出しのためのジェネリックスタイルを持っていると言うことができます。次に、親コンテナには背景を編集する修飾子があります。次に、コントラストの問題を防ぐために、その見出しに適用された後続の色の規則をオーバーライドする必要がありますが、おそらくは他の要素のセット全体もオーバーライドする必要があります。

この問題をさらに複雑な状況にどのように推論すればよいですか？私は手動ですべてのスタイルをオーバーライドすることができますが、BEM方法論ではそれを処理するためのより良い方法はありますか？ それは問題でもありますか？

CSS

.headline{ 
    ... 
    color:#513252; 
    ... 
} 
.section--bg-purple{ 
    background-color:#513252; 
} 

HTML

<section class="section section--bg-purple"> 
    <h1 class="headline headline--main">Lorem ipsum</h1> 
</section> 

私は何とか自分のLESSにそのような何かをしましたが、良い方法があるかどうか私はわからない：

.section{ 
    ... 
    &--bg-purple{ 
     background-color:@c_purple; 
     [class^="headline"]{ 
      color:#ffffff; 
     } 
    } 
    ... 
} 

Answer 1

私はここでmixin .section__headlineを使用することを好むでしょう。

HTML：

<section class="section section--bg-purple"> 
    <h1 class="section__headline headline headline--main">Lorem ipsum</h1> 
</section> 

CSS：

.headline{ 

    ... 
    color:#513252; 
    ... 
} 

.section{ 
    ... 
    &--bg-purple{ 
     background-color:@c_purple; 
     // here it is 
     .section__headline { 
      color:#ffffff; 
     } 
    } 
    ... 
}