Is CSS !important ok into a BEM modifier?

Question

Given an element with some styling and an additional class (mywidget_button--disabled) that works as BEM modifier, does it has sense, as practice, to use the !important clause?

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

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

The first class is more specific and wins on the second one, but being the disabling class a modifier that (theoretically) should have more priority than the "common" styling, is it correct to rely on the !important clause?

Or does it make the code prone to spaghetti-headache?

Answer 1

I personally prefer using BEM with namespaces, and then chaining the temporary states to other classes, which, in turn, increases the specificity.

Harry Roberts from CSS Wizardry has some great resources that cover these more-complicated situations. Namespaces, theming, and general guidelines.

Without seeing your specific project, it's hard to tell what might be the best approach, but either a chained state class, or a utility class — which does allow for !important — should work well. That is, of course, if you choose to take BEM up a notch with these additional techniques.

Answer 2

There are only two good reasons I can think of for ever using `!important``

• to over-ride an injected inline style that has come from a 3rd party library over which you have no control, for example, if you've implanted some sort of widget that grabs javascript that in turn makes style changes to your site.

• during debugging, to assert whether the selector you are editing actual does select what you want it to. You can do something like background: #f00 !important; and be almost certain whether or not you're in right place. Such a declaration has a very high probability of over-riding any mismanaged specificity.

Using BEM you should never have to use !important to control any code you've written. With BEM classes you add one class on everything and have a long list of classes, without nesting, in your css. The name-spacing is unique and there's well defined modularity. The result is that you don't have style leaks and specificity problems which are the primary mistaken reasons for using !important.

Answer 3

I think !important is ok. Personally I try not to write to specific as your first rule, if I did, I would probably go with

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

Answer 4

Based on my experience !important can give issues usually when multiple webparts have their own stylesheets. Best practice is to avoid using !important in CSS as it can override other styles, as long as your selectors are specific you shouldn't need to use !important.

Answer 5

Of course it's better not to ever have to use !important

The BEM naming convention has to be applied as broadly as possible to avoid having to resolve to that sort of trick.

BEM's main advantage being that it targets elements on a very precise level, it's a bit sad to have to combine it with important!.

In this case I would try to find a solution without .mywidget__default ~ so that .mywidget__button can be declared on its own, but it may not be possible in your case.

Answer 6

!important declarations should not be used unless they are absolutely necessary.

I would say don't use it, for example i'm currently adding a disabled button in a warning popup, this button now needs a red border in staid of a transparent one and this would not be possible when i would have a !important on the disabled button