Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 tools for this?

The CSS file has evolved over few years and from what I know no one has ever removed anything from it--people just wrote new overriding rules again and again.

EDIT: It was suggested to use Dust-Me Selectors or Chrome's Web Page Performance tool. But they both work on level of selectors, and not individual rules. I've got lots of cases where a rule inside a selector is always overridden--and this is what I mostly want to get rid of. For example:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

All the text in my HTML is inside some wrapper element, so it is never white. body's padding always works, so of course the whole body selector cannot be removed. And I'd like to get rid of such useless rules too.

EDIT: And another case of useless rule: when it duplicates existing one without changing anything:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

I'd happily get rid of the second margin-left... again it seems to me that those tools do not find such things.

EDIT: I appreciate all the answers, but sadly the tools you suggested did not make any useful suggestions. I upvoted your answers, but I'll wait for a tool that does things more granularly, as specified above.

Thank you,

share

locked by John Conde May 13 at 18:28

This question exists because it has historical significance, but it is not considered a good, on-topic question for this site, so please do not use it as evidence that you can ask similar questions here. This question and its answers are frozen and cannot be changed. More info: help center.

    
You could take the lack of any suitable tool as an opportunity: since you understand what you need, you may be the best person to create such a tool. You can inspect the code of the existing tools for ideas and techniques, and then build something that works at the level of rule rather than selector. Your chance at fame and fortune! ...well, maybe just fame ;) –  iconoclast May 7 '12 at 17:06
    
@Brandon: this question just hit the ”notable question” mark… so you might be right :-) –  liori Dec 4 '12 at 18:53

6 Answers 6

Dust Me Selecters Firefox extension

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

share
    
Great, I'll check it right away! –  liori Mar 4 '11 at 15:54
    
These tools can only remove useless selectors. I clarified my question. –  liori Mar 4 '11 at 16:33
2  
@liori: I don't think this is reliably possible. In your margin example, the second margin rule may seem superfluous but it has higher specificity and could override a later rule. For example, if a class .abc has a different margin, <a class="abc"> would change its margin on hover I think. Now that's probably not what you intend, but it certainly could be, and you can't blindly remove that duplicate rule. –  DisgruntledGoat Mar 9 '11 at 12:41
    
@DisgruntledGoat: I am thinking of a case of a closed world: if it is not specified, it does not exist. So if there is no definitions for a.abc, or there is no <a class="abc"/> anywhere in the HTML, it does not exist.Anyway, I already finished the task that prompted me to ask this question here, and I ended up with applying a lot of heuristics. I tried Chrome's Developer Tools, but they did not help me much. –  liori Mar 9 '11 at 15:02

You can also take a look at Unused-CSS.com This tool will explore your pages and build an optimized CSS files without the unused selectors

share

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.

share

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."

https://www.npmjs.com/package/uncss

Edit after comment:

I think you are asking for two different things:

  1. 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: https://www.npmjs.com/package/css-byebye

  2. Optimise the stylesheet where rules might be merged / simplified.

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

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: https://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
share
    
Judging from the main page, it works on the selector level. Can it actually remove rules in the two example cases I mentioned in the question? –  liori Feb 17 at 19:49
    
I have edited my answer. I tested your first example with CSSO web interface: result: body{color:#fff;padding:10em}h1,p,ul{color:#000} –  Amida Feb 17 at 20:16

@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.

share

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!

https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

share

Not the answer you're looking for? Browse other questions tagged or ask your own question.