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.