Is CSS important in a BEM modifier?

Given an element with some style and an additional class ( mywidget_button - disabled ), which works as a BEM modifier, it makes sense, as a practice, to use an important sentence?

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

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

The first class is more specific and wins the second, but being a disconnection class, a modifier that (theoretically) should have a higher priority than the "general" style, is it right to rely on an important proposal?

Or does this make the code prone to spaghetti headache?

+4
source share
6 answers

BEM , , , , .

CSS Wizardry , . Namespaces, theming .

, , , , , . , , BEM .

+2

, : `! important``

  • , , , , - , javascript, , , .

  • , , , , , . - background: #f00 !important; , . .

BEM, !important . BEM , , css. . , !important.

+2

, !important . , , , ,

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

, , , - . ! CSS, , , ! Important.

+1

, ! important

BEM , .

BEM , , , !

.mywidget__default ~, .mywidget__button , .

+1

! , .

, , , , , , a!

+1

Source: https://habr.com/ru/post/1608464/


All Articles