Finding Unused CSS Selectors in Chrome

We’ve all done it. Write a bunch of CSS, then decide later there’s a better way to do things and rework everything. At this point, I usually just try to leave well enough alone because I’ve managed to get it to work, but to optimize a site it’s important to make sure the only things getting downloaded are things that will be used, and a bunch of unused CSS rules flies in the face of that idea.

For single page and other small sites, Chrome’s built in Web Page Performance audit can be used to find out if you have any extra CSS rules that aren’t really being used.

  1. Open up dev tools and go to the Audit tab.
  2. Make sure you have the Web Page Performance audit selected.

Set up Audit 3. Push “Run”

You should get something that looks like the following: Set up Audit

From there, you can expand each CSS File to see which selectors are not being used. Unfortunately, Chrome doesn’t provide any way to generate the files with these selectors removed, but it is a good place to start and make sure you aren’t dragging down your site with a bunch of excess CSS.

Written on June 14th, 2015 by Dan Walker
Tags: chrome, css, how-to.

Want to read more?

If you’ve enjoyed what you’ve seen so far, you might like some of my other posts. Visit the archive to see all of my past writings.

Blog Archive »
 

About the Author

Dan Walker is a programmer from Grand Rapids, MI. He works at Gordon Food Service.

More About Dan »

Get in touch