💥 Please make sure to paste in valid CSS.

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

🤓 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:

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:

Do you know of any other tools that are missing here? Feel free to suggest one!

💕 Contributing

Did you spot an error? Do you miss a feature? Please be sure to check out the list of existing issues before creating one of your own. Any feedback and help is appreciated.

🤝 Credits and further links

📖 License

This repository is published under the MIT license.