How do I identify and eliminate unused CSS styles from my bloated stylesheet?

Question

I have a legacy stylesheet that is now full of unused styles. The problem is identifying the necessary from the unnecessary. Are there any tools to help with this?

Catania

possible duplicate of Tool to identify unused css definitions – Cystotomy

possible duplicate of How can I find unused images and CSS styles in a website? – Preform

Answer 1

CSS Usage is a great Firefox add-in. You can browse multiple pages and it will work out which rules haven't been used on any of them - so it is more accurate than a tool that scans a single page.

Roter

+1 Sounds good - although I suggested Dust-Me, it can be a bit tedious. I'll certainly look into this one. – Artemus

+1 for CSS Usage over Dust-Me as it provides a great deal more information. – Eastnortheast

Answer 2

You could try the Firefox Dust-Me Selectors add-on.

Artemus

Answer 3

Install Google's pagespeed plugin for firebug:

http://code.google.com/speed/page-speed/

Then in Firebug, open the 'pagespeed' tab and, with 'performance' selected, click 'analyze performance'.

If you have unused style rules on the present page, then along with lots of other useful suggestions, you will see a list item labelled "Remove Unused Css". Click to expand it and see a breakdown by resource of unused css rules appearing on the present page, along with the memory size that you will save by removing the unused rules.

This is just one tiny feature of the pagespeed toolkit, which you definitely familiarize yourself with if you're at all interested in your page performance on the client side.

You may also be interested in yslow, a similar tool for firebug developed by yahoo.

Antoninaantonino

Answer 4

This tool called, "csscss" removes identifies duplicated styles:

One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps.

To do that, you need to have all the rulesets in your head at all times. That’s hard, csscss is easy. Let it tell you what is redundant.

Shockheaded

Answer 5

There is a really handy plugin for Grunt called UnCSS. It will automatically remove unused CSS on the fly. Check out this link for more info:

Remove Unused CSS automatically using Grunt

Shawana

Answer 6

Remove Unused CSS automatically using Grunt

Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'css/test.css' }
                ]
            }
        },
      cssmin: {
            dist: {
                files: [
                    { src: 'css/test.css', dest: 'cleancss/testmin.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks.
    grunt.registerTask('default', ['uncss', 'cssmin']);

};

Statics

Answer 7

npm install uncss -g

Then

uncss http://example.com/ > out.css

Hangchow