Elwinar

Minimalist by design

UnCSS your site

2015.04.04

Every developer who used bootstrap, foundation or any other CSS framework winced one day when reading their website final CSS (minified or not):

What the f**king f**k are all those rules that bloat my CSS ? I don’t even use a tenth of these rules!

Well, salvation is coming. There have always been a project in development trying to solve this particular problem for as long as I can remember. And as I was checking page speed for my personal website, I decided to give one of those a try. This can seem futile, but even with HTTP2 incoming, it cannot hurt to lighten files that are going to be loaded plenty of times.

My choice ported on UnCSS, which use PhantomJS to load the HTML you provide it and extract the used rules based on the selectors that are actually in the set of HTML files. It also check for Javascript-induced classes, etc. I personally used the gulp-uncss plugin to integrate the check to my asset building pipeline, just before autoprefixing and minification.

gulp.task('styles', function() {
    gulp.src('styles/app.less')
        .pipe(less())
        .pipe(rename({extname: '.css'}))
        .pipe(uncss({html: ['views/*.html']}))
        .pipe(autoprefixer())
        .pipe(minify())
        .pipe(gulp.dest('public/'));
});

The only downside of this approach is that uncss will remove CSS rules for selector that are dynamically generated, like for your typical markdown-based blogpost (say… this one ?). The trick is here to have a dummy page that will contain the tags you want to save. That’s much easier than using the plugin options to keep some rules, or using an URL to load real HTML generated from markdown.

Result: the old file was 130Ko, the new is only 7Ko (I’m extra-lean on CSS). Down to 500 lines, the CSS file is even browsable without the need of coffee.

Et voilà !