CSS !important 是否可以用于 BEM 修饰符？答案

【问题标题】：Is CSS !important ok into a BEM modifier?CSS !important 是否可以用于 BEM 修饰符？
【发布时间】：2015-12-19 07:09:25
【问题描述】：

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

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

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

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

或者它是否使代码容易让人头疼？

【问题讨论】：

什么是BEM修饰符
是一种CSS命名风格：getbem.com/naming
可能是 BEM 完全崩溃的领域之一。这不是 BEM 独有的问题，而是它根本无法解决的问题。
BEM 是我遵循的一般方法，适用于我的所有项目。只是在像这样的一些特定情况下，我需要找到不同的方法。我想知道避免使用 !important 来解决这个问题是否是一种正确的方法，或者这是否会降低可维护性/可扩展性以尝试对齐两个类的特异性。

标签： css css-selectors bem

【解决方案1】：

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

来自 CSS Wizardry 的 Harry Roberts 提供了一些很好的资源来涵盖这些更复杂的情况。 Namespaces、theming 和 general guidelines。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我认为!important 没问题。就我个人而言，我尽量不写具体作为你的第一条规则，如果我这样做了，我可能会选择

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

【讨论】：

谢谢。在我的情况下，我是特定的，因为样式最终会对稍微不同的标记做出反应，并且必须仅在存在 .mywidget__default 元素时应用。但是是的，我可以添加一个额外的类来更好地区分这些情况（但特异性将保持不变；可能为修饰符添加更多特异性可能是一种正确的方法（即使它有点违背我使用 BEM 的目的） .

【解决方案4】：

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

【讨论】：

是的。我想知道在 BEM 修饰符的情况下（应该是一种“最终修饰符”，BEM 没有比修饰符更深的部分）是否可以使用 !important 作为类某种“最终状态”（理论上，不应该被覆盖）。

【解决方案5】：

当然最好不要使用 !important

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

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

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

【讨论】：

是的，我同意。我不确定解决它的最佳方法是什么。现在唯一的事情是动态添加一个类到我的 __button 以便它知道何时在它之前渲染了一个 __default 元素（不管是 adiacent。实际上样式是试图适应两种不同的（即使是轻微的）HTML标记；可能最好的解决方案是将两个SCSS mixin中的样式分开，并根据渲染的标记使用一种或另一种。可能是更易于维护的方式，我会减少第一类的特异性，我将不必依赖 !important。

【解决方案6】：

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

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

【讨论】：

好点。正是我担心的； !important 可能阻止的未来更改。我想知道在 BEM 命名的上下文中它是否有任何意义或可能“风险较小”。但答案似乎是：“不，风险并不小”