Scout-App logo icon

Graph My CSS

This graph shows the specificity of your CSS selectors throughout your file. The left side is the first selector and the right side is the last one. Idealy you will have very low specificity throughout your whole file, and any higher specificity selectors will come at the end. This means you are overriding fewer things, and in turn, writing less redundent, and more maintainable CSS. This is heavily influenced by the ITCSS methodology.

Watch an hour long video explaining these ideas in detail, or get the TLDR in 3 pictures.

Paste your CSS:

Your data:

How should I organize my Sass files? Here's an example of one way.