The Correct Way to use Specificity in CSS
CSS stands for Cascading Style Sheets, the cascading part means that the more generic a rule is the more items it will effect. The exact opposite is also true the more ‘specific’ a rule is the fewer items it will apply to.
For example, if you decided to add a color to the body element like so:
body{
color:#ddd;
}
then all elements on that page, that do not have a more specific rule would use this rule. Which means that all the text on your website would be displayed in the color #ddd or a grey.
Gotcha: watch out for browser styles as they will take precedent over very generic styles. For instance, the above example will not style the anchor tags , they will still appear in the browser default blue.
Recommended Use
So, here is the thing, this really becomes an art form in itself. Too much specificity and you may be making your CSS too bulky, because you re-declare styles, not enough specificity and things go completely haywire as things inherit styles they shouldn’t.
So, what is the right amount?
Here is how I work, there probably is a better way but this gets it done for me. I like to declare what I see as generic styles. So for instance, I will do something like this:
p {
font-size: 12px;
line-height:1.6em;
}
a {
color:red;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1 {
font-size:20px;
}
...
these are styles that I would want to ‘cascade’ throughout my entire site. I then generally only use one or two more selectors to add specificity like this:
#mainnav li {
float:left;
}
.post p {
color:black;
}
I am not too sure if this adds any speed to my sites, but Chris at CSS Tricks gets into efficiently rendering css here
Rules
So now you know that you want to use specificity, but now you need to understand that different attributes carry different ‘weights’ in specificity. So an ID attribute is worth more ‘points’ than a class attribute. Here is a simple system to help you figure things out:
- HTML selectors are worth 1 point. Examples are p, h1, a tags
- Class selectors are worth 10 points
- ID selectors are worth 100 points
So you add up the points, and the one with the highest point total takes precedent.
Gotcha: If the point totals are equal the selector that shows up lower in the CSS file takes precedent
The last rule you need to remember is that specificity can still be trumped by the actual location of the CSS. If you are doing things properly, and housing all your CSS in and external style sheet than all you need to remember is the stuff above. But, if you are also in the habit of embedding your css or placing it inline, first of all stop doing that, and secondly you need to know that they will also change specificity. In case you don’t know what embedded or inline means:
Embedded Styles
Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.
<style type="text/css">
p { color: #00f; }
</style>
Inline Styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.
<p style="color: yellow;">
Each of these techniques will also have an effect on the cascade. The most important thing to know here is inline styles trump everything no matter of specificity, they are followed by embedded styles and finally external.
Gotcha:
the !important css declaration will trump even inline styles. It is generally used as a last possible option and is not considered good practice. Example:
p {
color:red!important;
}
Summary
I think that every developer creates their own system for specificity, one that works for them. I think that that is fine, but I would caution agains using too much specificity as it not only makes your CSS bulky and ugly it may slow down your site.
No related posts.
