CSS !important complete reference

Cascading Style Sheets cascade. this means that the styles are applied in order as they are read by browser the first style is applied and than the second and so on. or we can say last applied style will have more precedence than before and what the `!important` does is that it gave highest precedence(if those are same weight else higher weight will apply ).

The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important should be use with some precautions.

While using !important there are several thing come in my mind that

1. Is !important is bad for performance.
2. Can i override !important.
3. Is it bad to use !important.
4. What happen exactly when i use !important(or how !important works).

Now we will take those point one by one but first i would like to tell some basic thing about !important

---

How is it declared

The !important declaration is a keyword which can be added at the end of the css property/value. for example

p{  background-color:#F5F5F5 !important; }

Effect of !important

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity.

or if we are not using !important than 2 rules conflict on a single element than there principle are will be applied

• Source order : When 2 or more rules have same weight the last rule declared in the stylesheet will be applied .

• Origin of rules : If the rule between an user and author style sheet conflicts , the user\'s rule will be applied.

• Specificity : Specificity determines, which CSS rule is applied by the browsers.If two or more selectors apply to the same element, the one with higher specificity wins.and now if we use !important it will have highest Specificity. check this link to learn how calculate Specificity

Now its bit confusing that what is user\'s and author\'s stylesheet let me clear this

1. User style sheet is a style sheet that is on the customer\'s computer. It affects the pages that that person browses with that computer.

2. Author style sheet is a style sheet written by a Web designer for a specific Web page or site. It affects only the pages that call it, and none others.

---

Q. Is !important is bad for performance and how it works (4th point)?

Ans is NO its not bad for performance to prove that ill show how it works for that ill show you Firefox\'s CSS parser and it just seems to be an simple check for \"important\".

and If you were being really picky, you could also say that !important adds 11 extra bytes to your CSS file, this isn\'t really much, but I guess if you have a fair few !importants in your stylesheet it could add up.

Firefox uses a top down parser written manually. In both cases each CSS file is parsed into a StyleSheet object, each object contains CSS rules. The CSS rule objects contain selector and declaration objects and other object corresponding to CSS grammar.

_{image source}

Now, you can easily see, in such as case with the Object Model described above, the parser can mark the rules affected by the !important easily, without much of a subsequent cost. Performance degradation is not a good argument against !important

Q. Can i override !important ?

Ans is YES !important can be override but you can not override !important by normal declaration It has higher specificity than all normal declaration.

But it can be override with higher specificity !important declaration

this code in Firefox\'s parser will explain how it works

---

Q.3 Is it bad to use !important ?

Ans. well it depends if you are overriding inline style which is because of either any editor or framework that time its fine to use otherwise its not a good option

for example Text formatting defined via a WYSIWYG editor is inserted in the HTML code as inline styles. But those inline styles can be overridden by the !important declaration in the author stylesheet.

---

Than why use !important is consider bad?

Ans. Well, when a developer use bad just because he did not managed css properly and overriding other css. It creates lots of designing issue witch are worse than performance it also causes many extra line of code which is hard to maintain so in that case !important its not a good practice

its more easier to understand by this

The thinking of bad developer when he using !important

1. My rocking css is not working ..grrrr
2. What should i do know ??
3. And than !important yee.... now its working fine

Conclusion

You can use !important its neither reduce performance not bad practice until you are not using this as a excuse