CODEWITHSUNDEEP
htmlcss
Saravanamani
Saravanamani

Reputation: 33

Is it correct way to apply !important in css?

Am bit unaware of !important in css.

In my project i've used bootstrap. To achieve something in project i had

overrided the bootstrap.css by putting !important on my stylesheet.

Is it correct way to do something like this.

Please help me to correct, if am wrong and How does !important rule works.

Upvotes: 0

Views: 61

Answers (2)

ScottL
ScottL

Reputation: 1755

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

From here:

Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with greater specificity will be applied.

Some rules of thumb:

  • Always look for a way to use specificity before even considering !important Only use !important on page-specific CSS that overrides site-wide or foreign CSS (from external libraries, like Bootstrap or normalize.css).
  • Never use !important when you're writing a plugin/mashup.
  • Never use !important on site-wide CSS. Instead of using !important, you can make better use of CSS cascading properties and use more specific rules.

Upvotes: 1

Pranjal
Pranjal

Reputation: 1118

There are times when you need to override bootstrap css and apply styles form your stylesheet. But it does not necessarily apply the use of !important. The order in which your stylesheet files are used also matters. Eg: You must place bootstrap files before your customised stylesheet, so that styling defined in bootstrap is overridden. Sometimes it may also happen that even after your customised stylesheet is imported after bootstarp.css file, you may not get the expected results. This can be the issue because of css specificity. !important should not be used unless it is absolutely necessary after all other options have been tried out. If you use !important out of laziness, to avoid proper debugging you may suffer the consequences.

You can read more about css specificity and !important here:

http://sixrevisions.com/css/css-specificity/

https://css-tricks.com/when-using-important-is-the-right-choice/

Upvotes: 0

Related Questions