: How can I find unused/unapplied CSS rules in a stylesheet? I've got a huge CSS file and an HTML file. I'd like to find out which rules are not used while displaying a HTML file. Are there

@Margaret670

Actually John the new Firefox Developer Edition browser is better than using Firebug or the Firefox utility. Give it a try and you will not be disappointed I am sure!
www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

Vote Up Vote Down

@Gretchen104

Check uncss, it's a node module.

"UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS."
www.npmjs.com/package/uncss
Edit after comment:

I think you are asking for two different things:


Remove unused rules automatically, this is what uncss can do for you.
I also made this tool, CSS byebye, but it's not automatic like you ask: www.npmjs.com/package/css-byebye Optimise the stylesheet where rules might be merged / simplified.


In that case I'd recommend two tools that do this kind of things:


CSSO: css.github.io/csso/ clean-css: www.npmjs.com/package/clean-css

They do more or less the same optimisations, sometimes one has better results than the other, and sometimes it's the opposite. It depends on your stylesheet. (you could run one after another too :P)

I use them as part of a build process with grunt. So it's not really a visual thing like you ask but they do the kind of optimisations that you want.

Here is what they say for CSSO
(complete info here: en.bem.info/tools/optimizers/csso/)
Structural optimizations:


Merging blocks with identical selectors
Merging blocks with identical properties
Removal of overridden properties
Removal of overridden shorthand properties
Removal of repeating selectors
Partial merging of blocks
Partial splitting of blocks
Removal of empty ruleset and at-rule
Minification of margin and padding properties

Vote Up Vote Down

@Connie744

I've always liked CSS Usage. It's a plugin for Firebug and let's you scan the page and see which CSS rules are unapplied. It will even auto-scan and work across several pages.

Vote Up Vote Down

@Sent6035632

@John : excellent tool, thanks for the link
@liori : I would also highly recommend the Firefox Web Developer plugin which lets you display the element names/properties, edit the css in real time (doesn't write to your css file) so you can edit and test css changes without the faff of having to save and upload your css ever 3 seconds. + loads more features.

There is also a very nice DOM inspector that plugs into Firebug which also plugs in and is great for sorting out Javascript.

Vote Up Vote Down

@Kristi941

Dust Me Selecters Firefox extension

In Chrome's Developer Tools you can use the Web Page Performance tool to find unused CSS rules.

Vote Up Vote Down