Question

给定一个带有一些样式的元素和另一个类（ mywidget_button - 禁用）作为 BEM修饰符，它是否有意义，作为练习，使用！important 子句？

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

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

第一个类更具体，在第二个类中胜出，但作为禁用类的修饰符（理论上）应优先于＆＃34; common＆＃34;样式，依赖！important 子句是否正确？

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

Answer 1

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

来自CSS Wizardry的Harry Roberts有一些很好的资源可以解决这些更复杂的情况。 Namespaces，theming和general guidelines。

如果没有看到你的具体项目，很难说出什么是最好的方法，但是链接状态类或实用程序类 - 它确实允许！important - 应该运行良好。当然，如果你选择用这些额外的技术将BEM提升到一个档次。

Answer 2

只有两个很好的理由让我想到永远使用`！important``

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

使用BEM，您永远不必使用!important来控制您编写的任何代码。使用BEM类，您可以在所有内容中添加一个类，并在您的CSS中有一个很长的类列表，而不需要嵌套。名称间距是唯一的，并且有明确的模块化。结果是您没有样式泄漏和特殊性问题，这是使用!important的主要错误原因。

Answer 3

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

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

Answer 4

根据我的经验！重要的是，当多个webparts拥有自己的样式表时，重要的是可以提供问题。最好的做法是避免在CSS中使用！important，因为它可以覆盖其他样式，只要您的选择器是特定的，您就不需要使用！important。

Answer 5

当然，最好不要使用！important

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

BEM＆＃39;主要优点在于，它在一个非常精确的水平靶向元件，它＆＃39;！人有点悲伤有将其与结合重要

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

Answer 6

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

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