Grow your CSS skills. Land your dream job.

A discussion about !important

  • # February 11, 2013 at 1:34 am

    As we all know, !important is looked down upon like some kind of ungodly, unspeakable abomination.

    But is it really all that bad?

    In the site I’m working on currently, I’ve found that sometimes, using !important saves code. I don’t use it to fix specificity issues that I don’t understand—rather, I know why there is a specificity problem, and I’m using !important to rectify it in the most efficient way.

    I’m not talking about using it frivolously, just when you know for a fact that you ALWAYS want a value to be true.

    The example that inspired me to post this thread:

    I have a search box that is given a column class to control its width. The search box div has 16px of padding in order to show its background. It should always have this padding.

    Meanwhile, I have a media query that, at a certain screen width, gets rid of the padding on columns that are direct children of the main wrapper, provided they’re not of one specific class, ‘main-posts’. Like so:

    @media screen and ( max-width: 700px ) {

    .main-grid-module, .content-wrap > [class*='col-']:not(.main-posts) {
    width: 100%;
    float: none;
    padding: 0
    }
    Now, since my search box is also a column, this gets rid of its padding.

    I could combat it with another rule:

    .content-wrap > [class*='col='].search

    But that seems like an extremely unnecessary amount of code for something that !important can accomplish.

    .search {
    padding: 16px !important
    }

    Again, I always want this search box to have 16px of padding. So is it really that bad to use !important to make sure of it?

    Any thoughts would be appreciated.

    **EDIT: Since posting this I’ve simplified that selector a lot…seems as if I momentarily forgot to take advantage of the cascade. But the question remains valid. Is it excusable to use !important if a) you know you never want a value to change, and b) it simplifies the code?**

    # February 11, 2013 at 2:13 am

    I use it time to time as well when I want a value to be always the same no matter what. No big deal if you know what you are doing.

    # February 11, 2013 at 5:16 am

    You can do anything you like with your code when working alone. Although, if you ever wanted to work as part of a team, you might want to learn to write team-friendly code.

    See this Quora answer for my thoughts on !important: http://www.quora.com/Cascading-Style-Sheets/What-are-the-problems-with-using-important/answer/Joshua-Hibbert

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

You must be logged in to reply to this topic.

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