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

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

1 个答案: