Why my site doesn’t use all of the CSS however?

Well someone can ask how you can have CSS that contains selectors that aren’t used on the site. There are two reasons to happen and most of the cases both of them are true.

The first reason is that not all of the pages in a site need all of the selectors. Imagine large web based application with lines of CSS and one of the sites’ pages is the “about” page where you’ve only the header, the footer and some text. That’s my favorite example! In fact you don’t need to load the whole CSS file just to apply only few selectors for this page. In most of the cases this is the reason to have unused selectors.

The second reason is that during the development process most of the code become old and therefore unused. You start by writing some CSS selectors which after changing the requirements, and the layout are no longer used. But the fear to ruine the layout because some other page can break after the removal of some selectors make the CSS to grow and fill with unused code.

Now you can overcome this problem by simply using a software (JavaScript) that helps you determine which selectors are never used. Check out this brilliant solution called helium.