Repository files navigation

A visual way to analyze the specificity of selectors in CSS.

• Website
• Introductory blog post
• Features
• Contributing
• Download

TheSpecificity Visualizer enables you to identify patterns, trends and inconsistencies across a CSS file in bird’s-eye view. It’s especially useful for analyzing big and complex stylesheets. The underlying concept of thespecificity graph has been coined by Harry Roberts.

• 😍 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 of0,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 only want to see all 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 are treated as proper categories on they axis and aren’t simply “added up” (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.

Pull requests go into themaster branch. Thegh-pages branch is a presentation of themaster branch at the last given push.

• You must haveNode.js andYarn installed to run theSpecificity Visualizer locally.
• Clone the repository withgit clone https://github.com/isellsoap/specificity-visualizer.git
• Go into the folder withcd specificity-visualizer

• yarn start starts the application in development mode and continuously watches all files.

• yarn build builds the application in production mode.

You can simplydownload the latest version of the website as a ZIP file.

This repository is published under theMIT license.