css - CSS !important 可以加入 BEM 修饰符吗？

Question

给定一个带有一些样式的元素和一个用作 BEM 修饰符 的附加类 (mywidget_button--disabled)，作为实践，它是否有意义，使用 !important 子句？

.mywidget__default ~ .mywidget__button {
    border: 1px solid #000;
}

.mywidget__button--disabled {
    border: 1px solid transparent !important;
}

第一个类别更具体并且在第二个类别中获胜，但作为禁用类别(理论上)应该比“常见”样式具有更高优先级的修饰符，依赖 是否正确!重要 子句？

或者它是否会使代码容易出现意大利面式头痛？

Answer 1

我个人更喜欢使用带有命名空间的 BEM，然后将临时状态链接到其他类，这反过来又增加了特异性。

来自 CSS Wizardry 的 Harry Roberts 有一些很棒的资源可以涵盖这些更复杂的情况。 Namespaces , theming , 和 general guidelines .

在没有看到您的具体元素的情况下，很难说出什么可能是最好的方法，但是链式状态类或实用程序类(允许使用 !important)都应该工作良好。也就是说，当然，如果您选择使用这些附加技术使 BEM 更上一层楼。