How to perform analysis for CSS rules on your website

There are few ways to perform CSS rule analysis on your webpages, we will use an online tool to do just that.

We will use CSS stats to do CSS analysis for our website.

CSS Stats came into picture in 2013 and is now serving web dev community to analyze and understand how they can improve their stylesheets for a given website. We will learn how to know what's bad and how deep analysis of your CSS code will make your life a lot easier

When you goto cssstats.com you will get something like what's shown in picture above. Once you enter URL of your website or webpage or direct link to your CSS file and  click GO parsing will begin as long as etered web address is valid. You can also put in Raw CSS in field shown above.

Once parsing finishes there are heaps of data displayed. This data includes but not limited to

1. Number of CSS rules, Selectors, Declatations and properties found
2. Breakdown on the number of declarations such as font sizes, background colors, colors etc
3. Specificity graphs and more

Now that we've got a lot of data in our hands how can we use it and how to make sense of it. Let's jump into that now.

End of the day we want our CSS code to be

• Maintainable
• Have bare minimum duplicate rules
• Favor classes over ID rules
• Nest free selectors
• Eradicate color rules that are too close for eye to make a difference.
• Broadly remove unnecessary CSS rules.

In the next part we will jump straight into understanding data from CSS stats