CODEWITHSUNDEEP
css
Nick G.
Nick G.

Reputation: 1175

How can quickly tell what parts of a CSS file are being used on a page?

I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!

Upvotes: 3

Views: 318

Answers (2)

C3roe
C3roe

Reputation: 96226

And for Firefox there an add-on called CSS Usage – might be worth a look too.

Upvotes: 2

pzin
pzin

Reputation: 4248

You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.

Testing it on this site: enter image description here

Upvotes: 2

Related Questions