Automatically remove un-used CSS classes from a project

Question

I'd like to compare my CSS files with the classes that I'm actually using in the site, and generate a new CSS file that contains only those classes. The point being to get rid of classes that I'm not using.

I previously used the Dust Me Selectors extension for FireFox to find the used and unused CSS selectors but it doesn't work in FireFox 6 any more.

Are there any alternatives?

I think you should know where your css styles are... even if you find them using some tool as you assume, you will still need to find them in code to remove them, or i dont get your question right — Gatekeeper
– Gatekeeper, Commented Sep 8, 2011 at 12:35
@Gatekeeper Sometimes things do get away from you, especially if you inherit something someone else was doing. The OP basically wants a tool that produces a CSS file containing only the classes that are used in a project. I edited the question a bit more. — user50049
– user50049, Commented Sep 8, 2011 at 12:41
I am really impressed with how you (both editors) managed to turn a hardly readable question into a pretty good one. — Arsen7
– Arsen7, Commented Sep 8, 2011 at 12:46
@MuditChauhan I've made one final edit to your title. Please double check and make sure this is still the question you were originally trying to ask :) — user50049
– user50049, Commented Sep 8, 2011 at 12:54

Mike Vierwind · Accepted Answer · 2011-09-16 12:31:35Z

1

When you put your site to GT-Metrix. Than you can see the un-used CSS selectors. Or you can do it with Google pagespeed.

answered Sep 16, 2011 at 12:31

Mike Vierwind

7,0293 gold badges18 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gatekeeper · Accepted Answer · 2011-09-08 13:19:11Z

0

You can try this online tool or use Google Chrome's developer tool(installed by default, no extension needed), which has audits tab to display unused css selectors on current page... but i dont think there is a way to have it done automatically for you...

answered Sep 8, 2011 at 13:19

Gatekeeper

1,6163 gold badges22 silver badges34 bronze badges

Comments

tomexx · Accepted Answer · 2011-09-09 14:05:52Z

0

You can try CSS Usage extension for Firebug. It works lika a charm, but it requires manual work https://addons.mozilla.org/en-US/firefox/addon/css-usage/

answered Sep 9, 2011 at 14:05

tomexx

2,3492 gold badges22 silver badges34 bronze badges

Comments

Fabio Nolasco · Accepted Answer · 2013-03-12 20:39:54Z

0

This system claim to do that: http://sourceforge.net/projects/cssmerge/?source=dlp

But I couldn't make it work, though.

So here it goes some manual tools to compare the files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.

http://www.diffchecker.com/

http://www.araxis.com/merge_mac/index.html

http://csscompare.codeplex.com/

answered Mar 12, 2013 at 20:39

Fabio Nolasco

7,5326 gold badges37 silver badges34 bronze badges

Collectives™ on Stack Overflow

Automatically remove un-used CSS classes from a project

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related