8 ms·

Uncss – Find unused CSS

90 points by josephcs 12y ago

dvcc 12y ago
First thought was that this should be a grunt plugin, then I read the comments. Here it is: https://github.com/addyosmani/grunt-uncss https://github.com/addyosmani/grunt-uncss
- brokenparser 12y ago
  I thought there should be a Gulp plugin, and then I found this: https://www.npmjs.org/package/gulp-uncss/ https://www.npmjs.org/package/gulp-uncss/
  - ehynds 12y ago
    I thought there should be a Broccoli plugin, and then I found this: https://github.com/sindresorhus/broccoli-uncss https://github.com/sindresorhus/broccoli-uncss
EvaK_de 12y ago
Maybe I missed the info, but does it work for a whole website or only 1 subsite?
3minus1 12y ago
I don't see how this could work on a single page application where only a small fraction of the content is loaded on page-load.
mattwad 12y ago
You can also get a list of un-used CSS Rules using Chrome. In the Developer Tools, under Audits, the list will appear under "Web Page Performance."
baby 12y ago
As soon as I hit the page I understood what it was and how awesome that was going to be for me. This is genius! I'm sure something like that has been done before but I've never come across it until now.
eli 12y ago
Neat. There's also a Firebug extension that does this: https://addons.mozilla.org/en-us/firefox/addon/css-usage/ https://addons.mozilla.org/en-us/firefox/addon/css-usage/ A little rough around the edges, but it works. The challenge, of course, is that's it's hard to say for sure that something is unused. Maybe it's only called on one page, or only after some interaction with javascript on the page.
- alex_doom 12y ago
  >only after some interaction with javascript on the page That's why I will use a prefix js-[something] for elements that will interact with javascript and then user other classes for style so nothing gets removed by accident by others.
  - eli 12y ago
    Smart. I end up grepping the whole codebase by hand for each class I want to remove, but even that isn't perfect.
thenerdfiles 12y ago
I'm trying this out in AngularJS. So there's an issue with classes locked away inside templates (or building with @ng-class, anyone?), and authentication scenarios. I'm thinking about building URL workflows (stored in arrays) and passing authentication tokens via URL.
rubiquity 12y ago
Most of us are using CSS precompilers (Less, Sass, Stylus) and then stitching tons of files together into a single .css file. I wonder if there is an easy way to produce Sass/Less/Stylus files with the un-used classes removed.
- mariusc23 12y ago
  It would be sweet to have a grunt plugin that scans your CSS and templates and removes unused rules. It would probably have to read JS files to be thorough though.
- paulirish 12y ago
  Certainly possible with sourcemaps to essentially get a code coverage-like view for your precompiled styles. I havent' seen it done yet, however.
geuis 12y ago
Try Helium. https://github.com/geuis/helium-css https://github.com/geuis/helium-css I wrote and maintain this project for the last 4 years. There are issues with David Walsh's approach that are explained in the Helium README. Automatic stylesheet generation is a terrible idea, for one.
- highace 12y ago
  Cool, and this runs in the browser without needing nodejs too.
clutchski 12y ago
If this worked across a whole site rather than a single page, that would be great.
- deanclatworthy 12y ago
  Exactly. Sitepoint made a browser extension to do this years ago but it's not really actively maintained anymore: http://www.brothercake.com/dustmeselectors/ http://www.brothercake.com/dustmeselectors/
  - fat0wl 12y ago
    There is an add-on for Firebug too (https://addons.mozilla.org/en-us/firefox/addon/css-usage/ https://addons.mozilla.org/en-us/firefox/addon/css-usage/) -- I use it a big corp. Basically if there is some wild huge monolithic css file I'll cut a new one for a site & use this to pick a decent-looking base subset from the existing dung heap. Then I'll use it again later to analyze widgets etc. if someone complains "how come ______ doesn't look like it does on the old site?". I'd love for this all to be automated but it seems there are some fundamental flaws in that. Sometimes unused css still fits into a logical unit and should be included. Sometimes in-use css is just a piece of garbage innocuously clinging to some jagged edge of the DOM. I try to comment blocks of CSS with both starting and ending comments, "______ START" to "_______ END" to avoid this. That way I can extract those pieces later without really worrying that I'm mangling a code module, manually, without much fear.
silversmith 12y ago
This seems to beg for testing integration - run it for every page visited in feature tests, aggregate the results, spit out a "following selectors were defined but not used" report at the end.
chris_mahan 12y ago
I'm using css less and less these days, and letting the browser decide how to render html5 on its own...
harlanji 12y ago
This is a great first step. It seems the next step toward usefulness is making it follow some script throughout the site as a build/optimize step to tease out the full set of rule usage (think Selenium on PhantomJS). Automatically finding all rule usage in a data-driven application would be an NP complete problem, but with proper direction from the developers this could be a viable tool. Even more so if it could map back to LESS/SASS rules, which I think would also need some brute forcing or at least hand holding. Nice work!
tomswartz07 12y ago
If you're an ArchLinux AUR user, here's the package: https://aur.archlinux.org/packages/nodejs-uncss https://aur.archlinux.org/packages/nodejs-uncss
hit8run 12y ago
I prefer https://github.com/peterbe/mincss https://github.com/peterbe/mincss It's based on python :)

90 points by josephcs 12y ago

dvcc 12y ago

First thought was that this should be a grunt plugin, then I read the comments. Here it is: https://github.com/addyosmani/grunt-uncss https://github.com/addyosmani/grunt-uncss

brokenparser 12y ago
I thought there should be a Gulp plugin, and then I found this: https://www.npmjs.org/package/gulp-uncss/ https://www.npmjs.org/package/gulp-uncss/
- ehynds 12y ago
  I thought there should be a Broccoli plugin, and then I found this: https://github.com/sindresorhus/broccoli-uncss https://github.com/sindresorhus/broccoli-uncss

EvaK_de 12y ago

Maybe I missed the info, but does it work for a whole website or only 1 subsite?

3minus1 12y ago

I don't see how this could work on a single page application where only a small fraction of the content is loaded on page-load.

mattwad 12y ago

You can also get a list of un-used CSS Rules using Chrome. In the Developer Tools, under Audits, the list will appear under "Web Page Performance."

baby 12y ago

As soon as I hit the page I understood what it was and how awesome that was going to be for me. This is genius! I'm sure something like that has been done before but I've never come across it until now.

eli 12y ago

Neat. There's also a Firebug extension that does this: https://addons.mozilla.org/en-us/firefox/addon/css-usage/ https://addons.mozilla.org/en-us/firefox/addon/css-usage/ A little rough around the edges, but it works. The challenge, of course, is that's it's hard to say for sure that something is unused. Maybe it's only called on one page, or only after some interaction with javascript on the page.

alex_doom 12y ago
>only after some interaction with javascript on the page That's why I will use a prefix js-[something] for elements that will interact with javascript and then user other classes for style so nothing gets removed by accident by others.
- eli 12y ago
  Smart. I end up grepping the whole codebase by hand for each class I want to remove, but even that isn't perfect.

thenerdfiles 12y ago

I'm trying this out in AngularJS. So there's an issue with classes locked away inside templates (or building with @ng-class, anyone?), and authentication scenarios. I'm thinking about building URL workflows (stored in arrays) and passing authentication tokens via URL.

rubiquity 12y ago

Most of us are using CSS precompilers (Less, Sass, Stylus) and then stitching tons of files together into a single .css file. I wonder if there is an easy way to produce Sass/Less/Stylus files with the un-used classes removed.

mariusc23 12y ago
It would be sweet to have a grunt plugin that scans your CSS and templates and removes unused rules. It would probably have to read JS files to be thorough though.
paulirish 12y ago
Certainly possible with sourcemaps to essentially get a code coverage-like view for your precompiled styles. I havent' seen it done yet, however.

geuis 12y ago

Try Helium. https://github.com/geuis/helium-css https://github.com/geuis/helium-css I wrote and maintain this project for the last 4 years. There are issues with David Walsh's approach that are explained in the Helium README. Automatic stylesheet generation is a terrible idea, for one.

highace 12y ago
Cool, and this runs in the browser without needing nodejs too.

clutchski 12y ago

If this worked across a whole site rather than a single page, that would be great.

deanclatworthy 12y ago
Exactly. Sitepoint made a browser extension to do this years ago but it's not really actively maintained anymore: http://www.brothercake.com/dustmeselectors/ http://www.brothercake.com/dustmeselectors/
- fat0wl 12y ago
  There is an add-on for Firebug too (https://addons.mozilla.org/en-us/firefox/addon/css-usage/ https://addons.mozilla.org/en-us/firefox/addon/css-usage/) -- I use it a big corp. Basically if there is some wild huge monolithic css file I'll cut a new one for a site & use this to pick a decent-looking base subset from the existing dung heap. Then I'll use it again later to analyze widgets etc. if someone complains "how come ______ doesn't look like it does on the old site?". I'd love for this all to be automated but it seems there are some fundamental flaws in that. Sometimes unused css still fits into a logical unit and should be included. Sometimes in-use css is just a piece of garbage innocuously clinging to some jagged edge of the DOM. I try to comment blocks of CSS with both starting and ending comments, "______ START" to "_______ END" to avoid this. That way I can extract those pieces later without really worrying that I'm mangling a code module, manually, without much fear.

silversmith 12y ago

This seems to beg for testing integration - run it for every page visited in feature tests, aggregate the results, spit out a "following selectors were defined but not used" report at the end.

chris_mahan 12y ago

I'm using css less and less these days, and letting the browser decide how to render html5 on its own...

harlanji 12y ago

This is a great first step. It seems the next step toward usefulness is making it follow some script throughout the site as a build/optimize step to tease out the full set of rule usage (think Selenium on PhantomJS). Automatically finding all rule usage in a data-driven application would be an NP complete problem, but with proper direction from the developers this could be a viable tool. Even more so if it could map back to LESS/SASS rules, which I think would also need some brute forcing or at least hand holding. Nice work!

tomswartz07 12y ago

If you're an ArchLinux AUR user, here's the package: https://aur.archlinux.org/packages/nodejs-uncss https://aur.archlinux.org/packages/nodejs-uncss

hit8run 12y ago

I prefer https://github.com/peterbe/mincss https://github.com/peterbe/mincss It's based on python :)