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

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

还是它会让代码容易让人头疼？

score 3 · Accepted Answer

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

CSS Wizardry 的 Harry Roberts 有一些很好的资源可以涵盖这些更复杂的情况。命名空间、主题和一般准则。

如果没有看到您的具体项目，很难说出什么可能是最好的方法，但是链式状态类或实用程序类（确实允许 !important）应该可以很好地工作。当然，如果您选择使用这些附加技术将 BEM 提升一个档次。

score 3 · Accepted Answer

我能想到的永远使用 `!important` 的理由只有两个

覆盖来自您无法控制的第 3 方库的注入内联样式，例如，如果您植入了某种小部件，该小部件可以抓取 javascript，进而对您的网站进行样式更改。
在调试期间，断言您正在编辑的选择器是否确实选择了您想要的。你可以做类似的事情background: #f00 !important;并且几乎可以确定你是否在正确的地方。这样的声明很有可能推翻任何管理不善的特殊性。

使用 BEM，您永远不必使用它!important来控制您编写的任何代码。使用 BEM 类，您可以在所有内容上添加一个类，并在您的 css 中拥有一长串没有嵌套的类。名称间距是独一无二的，并且有明确定义的模块化。结果是您没有样式泄漏和特异性问题，这是使用!important.

score 1 · Accepted Answer

根据我的经验 !important 通常会在多个 webpart 拥有自己的样式表时出现问题。最佳实践是避免在 CSS 中使用 !important，因为它可以覆盖其他样式，只要您的选择器是特定的，您就不需要使用 !important。

score 1 · Accepted Answer

!important 声明除非绝对必要，否则不应使用。

我会说不要使用它，例如我目前在警告弹出窗口中添加了一个禁用按钮，这个按钮现在需要一个红色边框而不是一个透明的边框，当我有一个 !important 时这是不可能的在禁用按钮上

score 1 · Accepted Answer

我觉得!important还可以。就我个人而言，我尽量不写具体作为你的第一条规则，如果我这样做了，我可能会去

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

score 1 · Accepted Answer

当然最好不要使用 !important

BEM 命名约定必须尽可能广泛地应用，以避免不得不解决这种技巧。

BEM 的主要优势在于它以非常精确的水平定位元素，不得不将它与重要的结合起来有点难过！

在这种情况下，我会尝试找到没有 .mywidget__default ~ 的解决方案，以便可以自行声明 .mywidget__button ，但在您的情况下可能无法实现。

6 回答 6