Bootstrap: Remove "important" rule from CSS class "d-flex"

[nikkwong]

I'm not understanding the necessity of !important on the class d-flex:

.d-flex {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

This makes dynamically changing the display property difficult—we now have to use the !important rule any time we're trying to override this rule with a more specific selector.

It begs the question for why !important is used in the first place.

[bardiharborow]

1. CSS selector specificity can often interfere with correct application of .d-flex, and hence the class chooses to use !important to ensure this does not happen.
2. If you are having difficulty dynamically changing the display property, have you considered switching the classes out instead (which you should probably be doing anyway, rather than applying CSS directly from JavaScript).

[IamManchanda]

Important is very important for. Utility classes considering immutability

[arcanereinz]

How about an alternative version of d-flex that does not have important. We're using css in js where the classnames are dynamic so !important isn't that important and we discourage the use of important given the css is isolated to each React component.