Let's say you have a CSS with a few thousand selectors and many many rules. Let's say you want to eliminate the unused rules, how do you do that?
I spent about an hour looking online for some tool that would easily clean up CSS files. I've ended up trying a few browser extensions:
CSS Remove and combine, for chrome, did not work for me. It would only parse the very first web site in my browser window, and seemed to refuse
file:/// urls. I later discovered that
chrome natively supports this feature: just go in
developer tools (ctrl + shift + i), click the
audits tab, click
run, and you will find a drop down with the list of unused rules in your CSS.
Dust-me Selectors, for firefox, worked like a charm: it correctly identified all the unused selectors.
In both cases, however, the list was huge, I had thousands of unused selectors. I was really not looking forward to go through my CSS by hand, considering also that many styles had multiple selectors, and I could only remove the unused ones.
In the end, I noticed that "Dust-me" allowed to export the list of unused selectors as a
.csv file, and wrote my own script, css-tidy just to pick an original name to read this csv, parse the .css, and output a cleaned up version of it.
The result was pretty good, and in the end it saved me lot of work :-), have a look at it. Note that this also works with Chrome: all you have to do is feed
css-tidy with a list of selectors to eliminate.