18
votes

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,

2
  • 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, 2012 at 17:06
  • @Brandon: this question just hit the ”notable question” mark… so you might be right :-)
    – liori
    Dec 4, 2012 at 18:53

6 Answers 6

8
votes

Dust Me Selecters Firefox extension

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

4
  • Great, I'll check it right away!
    – liori
    Mar 4, 2011 at 15:54
  • These tools can only remove useless selectors. I clarified my question.
    – liori
    Mar 4, 2011 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. Mar 9, 2011 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, 2011 at 15:02
5
votes

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

4
votes

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.

2
votes

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
2
  • 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, 2015 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}
    – Kev
    Feb 17, 2015 at 20:16
1
vote

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

0
votes

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

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