Skip to content

A better alternative to !important

A more stable and more aesthetic alternative for !important

Ok, I should not talk about !important in the first place. Although you might need it from time to time, it might also be an indication your CSS hasn’t been structured well.

But sometimes you just need a little force to make your styling ‘win’ from existing styling. The standard way of doing that is using !important. For example:

/* Define some different box styles */
.standard .box.style1 {
    position: absolute;
    left: 10px;
    border: 1px solid #f0f;
}
.standard .box.style2 {
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid #ff0;
}
.standard .box.style3 {
    padding: 10px;
    border: 1px inset #00f;
}

/* Reset some styling if there's a parent tag with the class 'alt' */
.alt .box {
    text-align: center;
    color: #fff;
    border: 1px dotted #000 !important;
}

In this example, we use .alt .box to redefine some styles, but the selector is not strong enough to enforce the border styling. That’s why we resort to !important. color and text-align do not need the same treatment at the moment, but if someone sets the color in the selector .standard .box.style3, its styling will trickle down, overwriting styling in .alt .box.

We can put !important after every styling declaration, but that’s verbose and downright ugly.

Normally I resorted to using something that makes the selector stronger like an ID. You’ll get something like this:

#root .alt .box {
    text-align: center;
    color: #fff;
    border: 1px dotted #000;
}

It works perfectly, but it has one drawback: it requires the ID to be in the DOM. That might not be a problem, but sometimes you have no control over het HTML that the serverside code spits out. Besides that: you are misusing a DOM element for other needs. A colleague might remove that ID without knowing what effect it would have on the styling.

Since I don’t have to care about IE6, I can use attribute selectors to mitigate that dependency:

.alt .box[class*="box"] {
    text-align: center;
    color: #fff;
    border: 1px dotted #000;
}

It makes no sense at first: if you select a an element in the DOM with the class box, it always has a class attribute, but that’s the beauty of it. The [class] selector makes the CSS rule stronger without requiring extra markup: the class attribute is implicitly available.

The only trouble left is that it’s not really self-documenting. It’s a CSS hack like *+html, so it’s still better to have structured CSS code :)

Update

Though awkward, this selector works as well: .foo[class][class][class]. Each [class] you add makes the selector rule stronger.

Bookmark and Share
3 Responses
Follow responses to this entry through this RSS.
  1. Larry Botha

    Having to override selectors using higher specificity can be avoided by making use of the cascade and thus source order in your css:
    http://themousepotatowebsite.co.za/simple-methods-for-writing-scalable-css-right-now/

    You’re in for a nightmare using .foo[class][class][class] O.o

  2. Wouter Bos

    I agree that structure comes first. And thanks for the references to BEM, SMACSS, OOCSS. I only knew OOCSS as a way to structure CSS.

    But even then I sometimes need some extra “power” for my selectors. For example because of some external CSS that does not share the same structuring philosophy or legacy code.

    Baie dankie vir die tip!

  3. Larry Botha

    Sometimes there’s just no getting around it…

    I’m incredibly strict on not using ID’s in my styles… but WordPress’ limitations on customising the comment form is a prime example of a place where I have to abide by someone else’s structure.

    Ideally we would always have full control / flexibility in applications and sites, which is important for us to keep in mind when developing on projects that others may be involved in at a later date :)

Leave a response