After spending a little time searching for CSS Optimization solutions, I was pleasantly surprised to learn that one was bundled in Google Chrome’s Developer Tools.
I like to start web projects with boilerplates or bootstraps like Twitter’s, and then I spend hours cleaning-up the unused selectors.
Now, I just:
- Navigate to the site in Google Chrome
- Hit ‘F12’ to access the developer tools
- Select the Audit tab
- With ‘Web Page Performance’ checked, hit the ‘Run’ button
- A list of unused selectors FOR THAT PAGE is available.
I did run across solutions that would automatically produce a clean version of the stylesheet for you, like Mincss, but I’d much rather do it manually so that I can see what I’m removing.