如何在嵌套規則中覆蓋修飾符

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> 

不知何故，我不喜歡的東西，在我的少了，但我不知道是否有更好的辦法：

.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; 
     } 
    } 
    ... 
}