🌟 About this tool
With the above tool you get a quick overview of selectors and their specificities across a CSS file in bird’s-eye view.
It’s a visual way to identify potentially problematic patterns and especially useful for analyzing very big and complex stylesheets.
Be sure to read the blog post introducing the Specificity Visualizer.
Main features and differences to other tools
- 🤩 It’s a pretty fun and nice visual experience and potentially changes the way how you look into and think about your stylesheets.
- 🔍 Hover over single data points to see the exact selector or zoom into areas of interest, e.g. you can look at only the selectors of the first half of the file or you can zoom into all selectors with the specificity of
0,2,1across the entire file.
- 📊 To better distinguish different specificity categories the data points are using proper colors and forms. You can also click on a legend item to toggle its visibility, e.g. if you want to only see ID selectors.
- 📸️ Taking screenshots of the chart is great to track progress, e.g. you could save a snapshot of your stylesheet before and after a major refactoring to visualize the difference. Also, you could use it for presentations to effectively communicate to other developers and/or stakeholders.
- 📏 Specificities aren’t simply “added up” but rather treated as proper categories. After all, no amount of class selectors can overrule an ID selector. Also, selectors inside of
@documentblocks are counted, selectors inside of
How to read the chart
- The x-axis shows the physical location of selectors as they are written in the CSS. On the left side is the first one, on the right side the last one.
- The y-axis shows the specificity of selectors, beginning with the least specific one at the bottom and ending with the most specific one at the top.
What is considered a “good” or “bad” graph?
- First off, think of the chart more as a rough conceptual model and not as an exact tool.
- A spiky graph with an overall high specificity and high amount of noise can be considered as potentially “bad”.
- An upward-trending graph with overall low specificity and low amount of noise can be considered potentially “good”.
Please be sure to read the additional articles on this topic.
🤓 Additional articles on this topic
Check out these resources if you want to dig deeper into how specificity graphs can help you getting an overview of big stylesheets and what the reasoning behind it is:
- If you are not sure what specificity in CSS is all about, be sure to read the following articles: CSS Specificity: Things You Should Know by Vitaly Friedman, and CSS Specificity And Inheritance by Inayaili de León.
- The Specificity Graph by Harry Roberts
- Specificity Graphs by Jonathan Snook
- CSS specificity graphs in practice by Orde Saunders
Do you know of any other articles that are missing here? Feel free to suggest one!
🔨 Other tools you might find useful
There are a ton of other tools out there that can help you analyzing your CSS and the specificity of your selectors:
- CSS Stats by Adam Morse, Brent Jackson, and John Otander
- Graph My CSS by Jared Wilcurt
- CSS Specificity Graph Generator by Jonas Ohlsson
- CSS Reporter by Josh Barr
- Parker by Katie Fenn
- CSS specificity graph generator by Orde Saunders
- CSS Dig by Tom Genoni
- Specificity Calculator by Keegan Street
Do you know of any other tools that are missing here? Feel free to suggest one!
🤝 Credits and further links
- Read the blog post introducing the Specificity Visualizer.
- Check out the GitHub repository.
- Download this page as a ZIP file.
- Created by Francesco Schwarz.
- Many thanks to Harry Roberts for coming up with the concept of the specificity graph.
- Charts are powered by Highcharts under the CC BY-NC 3.0 license.
- The type face in use is Roboto Mono by Christian Robertson.
This repository is published under the MIT license.