📈 Specificity Visualizer

🌟 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,1 across 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 @media, @supports and @document blocks are counted, selectors inside of @keyframes blocks aren’t.

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.

🔨 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.