How to identify unused CSS definitions from multiple CSS files in a project

css performance optimization code-cleanup
jswanson picture jswanson · Sep 25, 2008 · Viewed 175.8k times · Source

A bunch of CSS files were pulled in and now I'm trying to clean things up a bit.

How can I efficiently identify unused CSS definitions in a whole project?

Answer

Derek Adair picture Derek Adair · Jun 24, 2010

Chrome Developer Tools has an Audits tab which can show unused CSS selectors.

Run an audit, then, under Web Page Performance see Remove unused CSS rules

enter image description here

Related questions

CSS performance relative to translateZ(0)

A number of blogs have expressed the performance gain in 'tricking' the GPU to think that an element is 3D by using transform: translateZ(0) to speed up animations and transitions. I was wondering if there are implications to using this …

Read More
Should CSS always preceed Javascript?

In countless places online I have seen the recommendation to include CSS prior to JavaScript. The reasoning is generally, of this form: When it comes to ordering your CSS and JavaScript, you want your CSS to come first. The reason …

Read More
External CSS vs inline style performance difference?

A friend of mine said that using <div style=""></div> instead of compressed css file put as link href at the head section gives some performance boost. Is that true?

Read More