Remove !important from css

[jeanbza]

https://github.com/pivotal-cf/pivotal-ui/search?utf8=%E2%9C%93&q=%21important

[charleshansen]

What trouble were you running into here? Here is the philosophy on !important in PUI:

The general rule is that modifier classes always have !important and all other classes never have !important.

For example, "bg-neutral-1" sets the background color and nothing else. If you don't want the background color, just don't use the class. It would be really weird if you added a bg-neutral class and your background color didn't change, so we want the !important.

On the other hand "dropdown-toggle" really shouldn't have !important because it incorporates a variety of styles and behaviors, some of which you might not want.

If we have non-modifier classes with !important, we should remove them. Let me know if you run into any.

[jeanbza]

@charleshansen

In my experience, libraries are imported like this:

<link rel="stylesheet" href="some-library.css">
<link rel="stylesheet" href="some-other-library.css">
<link rel="stylesheet" href="my-library.css">

This is because I fully expect my styles to always take precedence over any other library. Libraries are imported fully-fledged, but my styles start blank slate; so, I should be able to make incremental changes that fit into the existing libraries. In fact, !important is a tool intended for me to overwrite external library styles! So it's doubly bad that an external library would use this tool; it locks me out of my last-resort method!

On a different note, !important was an anti-pattern 5-10 years ago when we had to use it to force styles into specific configurations. Today we have many better options, and it continues to be an accepted worse alternative to using specificity to control styles; I've looked through its usage in pivotal-ui and I am (napkin-math level thinking here haha) fairly sure it isn't relied upon - just a nice-to-have. (is that true? i didn't check thoroughly, but it seemed that way)

Lastly, I'll note that other major ui frameworks - such as Google's material ui - don't rely on !important at all.

[charleshansen]

I believe I agree with everything you stated:

• !important is an anti-pattern and basically no one should use it ever, especially a library. I would never use !important in my own app and briefly tried to take it out of Pivotal UI when I rolled on.
• You are correct, we do not rely on !important. If we did it right, when you render a React Component, there will be nothing with !important styling in it. You should always be able to override any styles from a Component using css specificity. I try to always keep the Pivotal UI specificity as low as possible for this reason.
• The one exception are the modifier classes. We never use them in Pivotal UI directly, but we provide them to the end user. This is part of the OOCSS philosophy (should have been named Composable CSS) where you compose your styles by adding many classes instead of having classes with lots of styles. If you have some error header that should have background color red, put a bg-error-x class on it in the html instead of adding the background color attribute to your header css. This way you can easily make a similar header with a different background color without writing any new css. If you ever need to override the !important css, just remove the bg-error-x class.
• The reason that there are a ton of hits on github when you search for !important is because we archive many old versions of Pivotal UI. There really aren't that many of them in the scss.

[jeanbza]

Thanks for the explanation! @charleshansen