Why is !important used so much in style.scss?

Question

In Bootstrap tutorials, when people create their own Sass variables in a custom style.scss, I see lots of them using trailing !important.

If you want to see an example of what I mean, start at 13:45 here: https://www.youtube.com/watch?v=MDSkqQft92o&time_continue=24&app=desktop

.navbar {
  width: 100%;
  background none !important;

  @media(max-width: 34em) {
    background: black !important; 
  }
}

But then other code in the .scss file doesn't use !important. No explanation of why that is.

Anyone have some suggestions?

https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css — Sanchit Patiyal, Oct 24 '17 at 17:27
Possible duplicate of [What are the implications of using "!important" in CSS?](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) — Jayakrishnan, Oct 24 '17 at 17:44

score 2 · Accepted Answer · answered Oct 24 '17 at 17:35

!important means that the style preceding it will be "forced" onto the element, despite what other styles may set on it. For example:

.element {
  font-weight: bold;
}
.custom-class {
  font-weight: normal !important;
}

If you have an <span class="custom-class element"></span>, it will be displaying a font-weight normal, not bold.

score 1 · Answer 2 · answered Oct 24 '17 at 17:46

! important guarantees (or at least it tries) that the rule you're trying to apply is more important than others. So it overwrites other rules that might interfere with the new one. ! important is not necessary if the rules are ordered correctly because the last rules prevail over previous ones. ! important must be avoided as much as possible. Use it only if it's really necessary.

Why is !important used so much in style.scss?

2 Answers2