css - 如何覆盖嵌套规则中的修饰符

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