A visual way to analyze the specificity of selectors in CSS.
The Specificity 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 the specificity 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 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 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 the
yaxis and aren’t simply “added up” (after all, no amount of class selectors can overrule an ID selector). Also, selectors inside of
@documentblocks are counted, selectors inside of
Pull requests go into the
master branch. The
gh-pages branch is a presentation of the
master branch at the last given push.
- You must have Node.js and Yarn installed to run the Specificity Visualizer locally.
- Clone the repository with
git clone https://github.com/isellsoap/specificity-visualizer.git
- Go into the folder with
yarn startstarts the application in development mode and continuously watches all files.
yarn buildbuilds the application in production mode.
You can simply download the latest version of the website as a ZIP file.
This repository is published under the MIT license.