Question

I am using the !important tag in CSS to take precedence over later rules.

However, I realized that if another programmer defined in a later rule !important, the style assigned will be the latest !important one.

For example:
my css – loaded first.

#div{
    color: green !important;
}

the programmer’s css:

#div {
    color: red !important;
}

it will be red, although I would like it to be green.

Is the suitable way to fix it is to download my css before the end of </body> tag? What if the page couldn’t not be loaded quickly? is it right to download it at the beginning and at the end of the document?

Answer 1

The appropriate thing is almost never to use !important, partly for the reason you mention. !important means, my rule comes first, except when other rules also have !important, at which point the strange and exotic world of CSS specificity kicks in. Just make sure your rule is more specific than theirs.

To find out more about specificity, read Chris Coyier’s excellent introduction.