Don’t over-specify your CSS code
When I started writing CSS, I wanted every CSS rule to be as specific as possible. This was to get an instant overview as well as making sure that the desired style was applied to exactly the element I wanted.
After many years of web developing, though, working on both small and large projects, my experience is that over-specifying the CSS is usually a bad thing. It leads to the usage of !important remarks all over, since people have a hard time finding why a style is applied, or can’t find a proper way of specifying it better to just override the previous style. Even though Firebug has made it a lot easier to find inheritance and all styles applied to an element, there’s still seldom any need to as specific as most tend to be when writing CSS code.
To exemplify:
/* Instead of this: */
div#container p.pre-amble{
margin-top: 1em;
}
/* Write it like this: */
.pre-amble{
margin-top: 1em;
}
/* Or like this: */
#container .pre-amble{
margin-top: 1em;
}
/* Instead of this: */
div#container div#header ul#navigation li{
float: left;
}
/* Write it like this: */
#navigation li{
float: left;
}
/* Or like this: */
#header #navigation li{
float: left;
}
What’s the gain?’
The idea is to be as minimalistic as possible. Find the least numbers of common denominators needed to apply a style to an element. By doing this, you will get these advantages:
Much easier for specificity
This means that when you have any style you want that is an exception from the common styling, it will be easier to implement it and override the default applied styling.
File size
Generally speaking, a slimmed down-version compared to an over-specified CSS file is about half the file size. Kilobytes that will, o doubt, be to your gain.
Reusability
Meaning that CSS rules used for some parts can also be reused in any parts without any modification.
Readability
While more specific rules can give you a more detailed description of where it’s used, short, compact CSS rules give you a fast and clean overview.
My advice to you is to remove what you believe to be superfluous specificity, and see just how much more simple it gets and how happy you will become by doing it. ![]()


