Why So Many !importants?!

We use !important on any utility or single responsibility class. They are not meant to be overridden — meaning, if you need to override them you shouldn't use them in the first place. Your custom CSS should not include !important unless you are extending the Solid system and creating similar single responsibility classes.


A custom class is attempting to override a Solid class by using three margins but changing the fourth.

<div class="xs-m2 header">content</div>
.header {
margin-left: 10rem !important;


Custom classes are welcome, so long as they are not competing with or attempting to override Solid's utility classes.

<div class="xs-mr2 xs-my2 header">content</div>
 .header {
  margin-left: 10rem;

Also Correct:

Extending the system, this custom class bears one and only one responsibility, and therefore can use !important.

<div class="xs-mt7 header">content</div>
.xs-mt7 {
margin-top: 3.5rem !important;