18

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)
  • may have a really nice new option... it is a Nodes.js/Grunt plugin CSSRazor - just adding as a comment because I have just found it and haven't used it yet but it may great. If I like it in a couple days of testing I'll do a write-up on it. – Nick Wilde Mar 27 '14 at 3:17
  • and found a better one than CSSRazor. Answering shortly with uncss – Nick Wilde Apr 2 '14 at 17:33
10

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.

8

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.

enter image description here

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.

  • The cleaned css I can export isn't clean : it only add UNUSED before each unused statement. Is there any configuration to do for making it work? – Fractaliste Mar 15 '14 at 19:50
  • But still, he will need to open all of his site pages in order for the tool to record everything. And maybe some of the html element are not presented at that time _(user not logged in, therefore, no Edit Profile tab, hence, not #edit_profile css element used) and run through all conditions. – Mohammed Joraid Mar 17 '14 at 8:35
  • @Joraid: Yes that is true - though with most sites you'd only need to open one page of each kind to get all the classes/ids but still that is open and scan each page/AJAX content. You can use the autoscan feature to make it a lot less manual work. – Nick Wilde Mar 17 '14 at 14:02
4

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.

1

IntelliJ IDEA has some powerful web development features:

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

  • The OP asked for a tool that REMOVES unused css. There are lots of free options to find unused css. Chrome dev tools has one. – Tony_Henrich Sep 1 '15 at 18:03
1

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

0

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.

  • 4
    Welcome to Software Recommendations Stack Exchange! This post does not contain enough information to be considered a high quality answer. Please read our discussion on what makes an answer high quality to see if you can incorporate some of these improvements into your answer, otherwise it will be removed. – Braiam Mar 15 '14 at 1:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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