Tool to remove unused CSS

Question

For some web development project, I'm starting to use some external frontend frameworks. I'm not a good designer so they're very useful, but I never exploit half of their capabilities.

So to save some space on my CSS files, I'm looking for a tool which is able to understand my DOM architecture and my CSS file, and then remove all useless declarations.

• I don't care if it's a web-app, an IDE or browser plugin, or a Linux/Windows desktop application.
• Input : .html files (but if you have other suggestion I'm interested)

Answer 1

I have to say that I think this option is better than my original recommendation; my original recommendation was great for quick looking, this is better for making release packages.

UnCSS and specifically what I'm basing the recommendation off of is The Grunt wrapper for UnCSS; that of course integrates into the Grunt build system for great automation.

There is a fair bit of customization options (listed in detail too), and it supports both local and remote css files as the sources.

If using in Grunt I suggest using it in tandem with grunt-processhtml to automagically make your page(s) reference the new concatenated and cleaned css file(s).

How I use it: (a snip of my gruntfile.js)

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uncss: {
        main: {
            options: {
                report: 'gzip'
            },
            files: {
                '<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
            }
        }
    },
    processhtml: {
        main : {
            options: {
                strip: false
            },
            files: [{
                expand: true,
                cwd: '',
                src: '<%= src_files_html %>',
                dest: '<%= grunt.option("outpath") %>'
            }]
        }
    }

and then in my html file I have this:

    <!-- build:css ./css/cleaned.min.css -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link href="./css/style.css" rel="stylesheet">
    <!-- /build -->

which is transformed into:

<link rel="stylesheet" href="./css/cleaned.min.css">

and the CSS is a lot smaller and better for performance and mobile bandwidth.

Answer 2

I have a great option - at least I totally love it - although it is neither a web-app or a Linux application.

I recommend the Firefox addon CSS Usage - it does require Firefox and the Firefox addon Firebug.

Usage:

• just load page (via web, localhost (as in my picture) or even just filesystem,
• open firebug console and click css usage tab
• Click SCAN
• review and if you want export cleaned css (only from filesystem works reliably - though that should be a minor fix to the plugin - which I may do sometime).

Unfortunately the exported cleaned css has some annoyances; some rules are deleted (good) but some are prefixed with UNUSED. There should be an option IMO to just delete those as well but currently I don't believe there is (at least if so I've never found it).

As a work-around what I've always done is just copy and paste to Notepad++ and used the search and replace with this regex as the search string: UNUSED\..*?\} (and select . matches newlines) and a blank replace to just get rid of them. - to do the same in Sublime you'd use (?s)UNUSED\..*?\} as your regex. Most other good text editors should have similar functionality.

Answer 3

I have made this browser based online unused CSS remover tool.

Features:

1. Browser based. Nothing to install.
2. Checks CSS against multiple urls.
3. Provides options for manually selecting/deselecting items in the CSS file.
4. Can be downloaded and run on your localhost for unlimited URLs
5. Open-source Code

Disclaimer: I am the author of the code.

Answer 4

IntelliJ IDEA has some powerful web development features:

• works with Windows/Mac/Linux
• spots unused CSS class definitions

You need to have the Ultimate Edition to have access to the web development features though (free if you're the project lead or a regular committer in an open source project).

Answer 5

We wrote a free online tool for this: UnusedCSS

It recursively crawls your website (following internal links) and finds unused selectors (many other tools process one page only).

Answer 6

I've used the firebug plugin CSS Usage on a few projects before - the only downside is that you have to manually browse through your entire site to get an accurate map of what styles are in use.

It will, however, give you simplified versions of your css files which you can use to replace your current stylesheets.