Cleaning Up Unused CSS Selectors

From Vitaly Friedman/Smashing Magazine Newsletter #139:

We know how it works: requirements change, layouts change, the codebase changes — what remains, however, is unused code, which has to be reviewed and refactored every now and again. CSS is as prone to this as any other piece of code. However, you don’t need to do everything manually — going line by line, detecting unused code and cleaning up the style sheet. There are tools to help you (of course).

SymDiff, available for CSS preprocessors (Sass, LESS) and templating languages (HTML, Jade, Handlebars, JSX), reports any differences between the classes used in CSS and in your templates. Helium CSSscans a site and shows unused CSS, and so do UnCSS and Deadweight. You can also use Dust-Me Selectors Firefox pluginDevtools (“Audit Present State”) and other tools to keep your style sheets clean and neat. There’s no longer any excuse to leave unused CSS in your style sheets — and it isn’t that difficult to automate this little optimization into your workflow either! (vf)

Leave a Reply

Your email address will not be published. Required fields are marked *