When should I use!important?

Using!important in CSS often means that you are lazy lazy, selfish or overconfident.

First let those who do not know to see,!important is such a thing:

1 CSS 2  {3    color: red!important;}  {4    color: green;} 5 HTML 6 <p id= "thing" >will be red.</p>

This paragraph will be red, although the ID selector has a higher priority. But!importantthe rules will cover the way it's supposed to be.If CSS abuse!importantwill become very difficult to maintain. This is generally the kind of process that causes this misfortune: 

1. Why doesn't my CSS file work?
2. (then use the trick:!important)
3. OK, yes!

And then the next colleague will come up with some new styles, and he'll try to modify some CSS styles, but he doesn't get the results you expect. Eventually he found out that it was !important the Ghost. Then he would delete the!important and then add his own style to make the effect manifest. But, it rains, gourd Dipper float, this side is done, there will be because of this modification and style is wrong, so into a vicious circle.
More suitable for use: useful tool classes so when to use !important better? In my opinion, it is more appropriate to use in classes that have practical uses. Like a bunch of buttons. Now assume that you have a page on your .buttonclass. Whatever element you put on it, you want the element to look like a button: a specific font, rounded corners, a specific background color, and a border. So, you write this:

 css  

1{2   background: Red3   color: White;  4   padding: 3px;  5   border-radius: 5px;  6   border: 1px solid black;} 7 HTML 8 <a href= "#" class= "button" >do thing</a>

If there is a more advanced selector above the element, the following example may be the problem:

Html

1 <section id= "Content" > 2    <p>  text text blah <a href= "#" class= "button" >do thing</a>  </p></section >3{4   border-bottom: 1px dotted blue;  5 }

Now you can see that the button will turn into a dashed border, which is not what you want. You can look at the effect fiddle.

I don't think this is a problem with CSS itself. But here we've messed up the look of a button.

Using!important is a good way to make your button classes difficult to cover.

Css

1 . Button{2 background:Red!important;3 Color:White !important;4 padding:3px!important;5 Border-radius:5px!important;6 Border:1px solid black!important;7 8    /*For good measure*/     9 text-decoration:None!important;}

Other additions?

I'd love to hear from you if you have other situations that you feel are more appropriate to use.:-)

When should I use!important?