Understanding CSS Specificity: A Concise Guide
A Practical Look at Specificity
Today at work, we encountered a common but often overlooked challenge in web development: CSS specificity. We had a global font-size definition that, to our surprise, wasn't being overridden by a more recent class style. Upon inspecting the CSS in the developer tools, it became clear that the issue was rooted in CSS specificity - the new class style had a lower specificity score than the global style.
This real-world problem underscored the importance of understanding CSS specificity, not just in theory but in practical, day-to-day web development. In this article, I aim to demystify CSS specificity, drawing on this experience to show how a deeper understanding of this concept can save time and frustration in your web development journey.
The Basics of CSS Specificity
Specificity in CSS is like a game where different selectors earn different points. The selector with the highest points wins and its styles get applied. Here’s a quick rundown of the points system:
Element selectors (e.g.,
div,h1): 1 pointClass selectors (e.g.,
.container,.header): 10 pointsID selectors (e.g.,
#navbar,#footer): 100 pointsInline styles (e.g.,
style="font-size:12px"): 1000 points
Example:
div { /* 1 point */ }
.header { /* 10 points */ }
#navbar { /* 100 points */ }
Calculating Specificity
When selectors are combined, their points add up. The one with the highest total wins.
Example:
#navbar .menu-item { /* 100 (ID) + 10 (Class) = 110 points */ }
body #content .article h2 { /* 1 (Element) + 100 (ID) + 10 (Class) + 1 (Element) = 112 points */ }
In the examples above, the second selector has higher specificity, so its styles will override those of the first selector if they target the same element.
Practical Tips and Best Practices
Avoid Overusing ID Selectors: IDs are great for JavaScript hooks or unique styling, but they can make your CSS hard to override due to their high specificity.
Leverage Classes: Classes strike a good balance between specificity and reusability. They are your best friend for most styling tasks.
Use
!importantSparingly: This declaration overrides any other declarations, regardless of their specificity. Overuse can lead to maintenance nightmares. Use it only as a last resort.
CSS specificity might seem complex at first, but once you understand the basics, it becomes a powerful tool in your web development arsenal. Experiment with different selectors, and you'll soon get a feel for how specificity shapes your stylesheets.
Further Reading/Resources
