Bootstrap: Utilities !important rule

[reardestani]

Is it really necessary to use !important rule for utilities? You know, !important is not recommended.

We don't use utilities necessarily for overriding other properties. In most cases, we just want to apply some styles without writing CSS.

Other frameworks like UIKit does not use !important for utilities: https://getuikit.com/docs/utility

If you have overriding in mind, maybe Bootstrap can remove all the !important from utilities and add a new class for each of them with !important rule. Something like:

.p-5 { padding: 5rem; }
.p-i-5  { padding: 5rem !important; }

[selrond]

@reardestani !important is a great tool if used properly. Utility classes are one of proper use cases.

The mere fact, that you are using utility classes such as .p-5 and not declaring it in the stylesheet implies, that you want the utility class to do its' thing no matter what.

[mdo]

Is it really necessary to use !important rule for utilities?

For this project, yes.

At some point we'll improve upon things and make it so there's a healthier mix of components and utilities, but until then, we're sticking with the current setup.

[GreggOrdHume]

I dont think we need !important at all! The !important styles are causing issues for me. Bootstrap doesn't even need them for Bootstrap.

I use BEM flat selectors, I @import bootstrap first, then my styles so i can leverage the cascading nature of css, but that is ruined with these !importants... so I did a test, I removed all the !importants from _display and _spacing, things were much more flexible.

Please consider this.