Checking a css file

What’s the best tool/website to check through a css file to see which bits are not needed please?

Chrome Developer tools has a feature to find all the unused CSS I believe. And Firefox has an add-on called Dust Me. I’ve never tried them myself so I’m not sure how good they are. I found this information by Googling “Remove unused CSS”. If you do try them out, I’d be interested in what you think of them.

Hi, I used Firebug with the CSS Usage extension for that, but it was a long time ago.

https://addons.mozilla.org/en-US/firefox/addon/firebug/
https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Beaten by @WebMachine.

I’ll plug the Jetbrains IDE products here (Webstorm, Phpstorm, PyCharm, IntelliJ… - all have full html/css/js editing capability and support out of the box). They have awesome introspection and pick up not only unused css selectors but unused javascript functions as well. These usually appear grayed out or at least in a different colour when editing the source files. There can be false hits but these are fairly rare and are in unusual circumstances - static analysis of code written in a dynamic language is a hard problem to solve, but Jetbrains do it very well.

2 Likes

To find uneccessary css and js would you need all 4? Webstorm, Phpstorm, PyCharm, IntelliJ. ?

No, all of them include this functionality.

I don’t doubt that there is other software out there including in-browser extensions that can do the same thing, however, just that this is one of the many nice features of any Jetbrains’ IDE.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.