Bootstrap: Why so many !important css declarations?

Created on 13 Jun 2017 · 7Comments · Source: twbs/bootstrap

I need to set some of the basic colors of items to our corporate design system colors.

In 3.x this was not an issue, set up our custom _variables.scss and remap the colors.

But I keep running into roadblocks with classes like .bg-primary or .text-info to name two: these are set in the Bootstrap scss with !important declarations forcing me to redefine the style and also add !important.

Why all the !importantss?

css v4

Source

smlombardi

👍6

Most helpful comment

CSS should not need !important

We compile a file called design_system.css which is distributed to our various dev teams via Bower and NPM.

They load a vanilla Bootstrap install via Bower, NPM, or Bootstrap CDN -- they don't use the sass version -- and link to _that_ in their index.html, followed by the above-mentioned design_system.css, which has overrides and additional code for our company's apps.

Having to rely on a _custom.scss file and compiling Bootstrap sass files is not part of their workflow.

Again, I don't expect Bootstrap to use !important, especially in cases like I mentioned. It's an amateur technique.

smlombardi on 14 Jun 2017

👍14

All 7 comments

You can still do the same as in v3 and use a _custom.scss to define your custom colors.
The !important shouldn't matter if you use _custom.scss

wolfy1339 on 13 Jun 2017

CSS should not need !important

We compile a file called design_system.css which is distributed to our various dev teams via Bower and NPM.

Having to rely on a _custom.scss file and compiling Bootstrap sass files is not part of their workflow.

Again, I don't expect Bootstrap to use !important, especially in cases like I mentioned. It's an amateur technique.

smlombardi on 14 Jun 2017

👍14

They're there to ensure you can apply those styles as utilities no matter what. It's a necessary evil that's only present for utility classes, and nothing else.

You don't have to rely on the included custom Sass file (I think I'm going to nuke that damn thing at this point, it's way too confusing).

mdo on 14 Jun 2017

👎13 👍1

@mdo Here's a case in point: Using progress bars. Both Bootstrap 4's and ng-bootstrap's.

Their colors are set with things like bg-info. This uses the default BS4 "info" color of cyan. In my app, I have set this to be blue. Now all my progress bars are wrong.

As I said above, I cannot have our dev teams use the scss version of Boostrap. So now I need to re-define all the helper classes in MY css, also with !important. It's nuts.

smlombardi on 3 Jul 2017

Sorry, @smlombardi, but this was the direction we decided to take years ago. We're kinda locked into it now. Plus, most folks asked us for !important on these utilities.

mdo on 4 Jul 2017

👎17 👍1

The !important shouldn't matter if you use _custom.scss

Of course it doesn not; indeed, _it is the only sensible way to go with Bootstrap4_.

Though you might have a hard time explaining stakeholders _(and in less lucky areas, where e.g. using Angular or embedding non-escaped HTML inside scripts is considered "intuitive", even colleagues)_ why to spend time on "creating something that _is already there_".