Embarking on the journey of regular CSS usage necessitates a firm grasp on the concept of specificity and its application.
Comparable in complexity to concepts like floats and positioning, specificity presents a challenge to both newcomers and experienced developers. The various selectors in CSS each carry distinct weights, managed by specificity rules. This is the reason your styling may not appear as expected on your webpage.
If you frequently resort to the notorious !important declaration as a quick-fix in your CSS, this guide will be a revelation.
Understanding How Browsers Interpret CSS
A solid understanding of how browsers process CSS is crucial for foundational knowledge. Essentially, a browser assesses a stylesheet from the top down, thus:
/*Line 10*/
ul li a {
color: red;
}
/*Line 90*/
ul li a {
color: blue;
}
Here, the initially declared red color will be superseded by the later blue specification, as browsers assign higher priority to subsequent rules within the CSS.
This principle also extends to the sequence in which CSS files are loaded. For instance:
<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>
Positioning the custom.css file after the style.css means that any rules written in custom.css will override those in the preceding stylesheet. Theme developers often leverage this to provide customization options without modifying the primary CSS file.
The Intricacies of Specificity
The previously discussed concepts only hold true when selectors carry identical weight. Introducing IDs, classes, or combining elements increases their weight—this is specificity in action.
Specificity is determined by a point-based system with four key categories: inline styles (occasionally used by JavaScript), IDs, classes, and elements. The specificity points dictate which rule takes precedence.
- An ID is valued at 100 points.
- A class has a value of 10 points.
- An element merits 1 point.
For example, a selector like:
#content .sidebar .module li a
carries a specificity of 122 points (100 for the ID, 20 for the classes, and 2 for the elements).
Key Specificity Reminders
- Avoid excessive ID usage in CSS due to their high specificity compared to classes and elements.
- When selectors are of equal weight, their order of appearance dictates priority, with later rules prevailing.
- Directly embedded styles in HTML take precedence over external stylesheets.
- To overcome embedded styles, the !important directive is the only tool available.
- Pseudo-classes and attribute selectors are equivalent to classes in terms of specificity.
- Pseudo-elements are on par with elements in specificity value.
- The universal selector (*) has no influence on specificity.
Specificity in Action: Examples
ul li a {
color: red;
}
This simple selector has a specificity of 3, meaning it can be easily overridden by adding a class.
.content #sidebar {
width: 30%;
}
With the inclusion of an ID, this selector’s specificity jumps to 110 points.
.post p:first-letter {
font-size: 16px;
}
This specificity tally is 12 points, with pseudo-element and element each contributing 1 point.
p {
font-family: Helvetica, arial, sans-serif;
}
A lone element selector like this has the lowest specificity of 1, making it a foundational style that can be effortlessly overridden by more specific rules.
To supersede an ID selector’s rule, an unwieldy combination of 256 classes for the same element is required:
#title {
font-weight: bold;
}
.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {
font-weight: normal;
}
This illustrates the potency of using an ID in specificity terms.
In Conclusion
Specificity might lack the glamour of other CSS aspects, but it is often the most neglected. Correctly using specificity not only prevents issues but also accelerates development and enhances site performance.
Do you find yourself overutilizing IDs, or reflexively using !important in your CSS work? Share your experiences below.
Header image/thumbnail, precision concept image courtesy of Shutterstock.
