Grow your CSS skills. Land your dream job.

What is the deal with !important

  • # October 25, 2012 at 8:41 pm

    I am working on a wordpress theme. I have some styles for img set way at the top of my css. Way at the bottom of my css I set some new styles for img that are inside a div with class tooltip. For some reason, the styles at the bottom refuse to behave unless I add !important. Will this hurt my code by adding a few of these? I know !important needs to be used sparingly.

    # October 25, 2012 at 8:53 pm

    I wrote an answer on Quora recently in regards to !important: http://qr.ae/8Q9RC

    # October 25, 2012 at 11:24 pm

    Thanks for the article. I understand your point but my code should be working without !important. There is no reason that I can find for it not to work. I found the css that is setting the rules and do to the cascading nature of css, the rules at the bottom should have priority bur for some reason, it’s not working here. I tried all kinds of specificity.

    # October 25, 2012 at 11:43 pm

    Mind sharing a reduced test case for me to have a look at?

    # October 26, 2012 at 12:19 am

    In terms of specificity, I’m assuming you’re referring to the CSS specificity hierarchy. Use your bowser’s web inspector and make sure that your CSS isn’t being overridden by anything that is more specific to the elements that you are trying to style. I found a great article [here](http://http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ “arrticle on css hierarchy”) that has the hierarchy in it.

    And then of course there’s always the reduced test case.

    As for my opinion, I put `!important`’s all over my website whenever something else gets in the way. The only reason I would suggest not to use important, is because you want to make sure that the elements you are styling are able to be overridden by different styles in the future, say if you want to add something to some of the elements, but not all. Not so easy to do if there’s an `!important`…

    Hope this helps.

    # October 26, 2012 at 4:21 am

    I try to use !important very sparingly, usually only when a CMS adds styling to the HTML though. !important can be dangerous and problematic and should be the last option since it’s basically a CSS nuclear bomb.

    Try as best as possible to make specific CSS work for you. Definitely post a test case as the guys have, if the code is more specific yet not being styled correctly there may be another problem.

    # October 26, 2012 at 10:48 am

    It could be an inline style that is over riding it. Inspect your site with firebug.
    Just inspect that element and see exactly where the style is coming from.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".