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

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.

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.

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