CODEWITHSUNDEEP
cssstylesheetdefunct
Cornish
Cornish

Reputation: 899

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

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?

Upvotes: 34

Views: 19933

Answers (7)

Jonathan
Jonathan

Reputation: 7098

npm install uncss -g

Then

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

Upvotes: 0

Fenton
Fenton

Reputation: 250842

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.

Upvotes: 26

Pranay Soni
Pranay Soni

Reputation: 1066

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']);

};

Upvotes: 0

Deano
Deano

Reputation: 2895

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

Upvotes: 1

chrisl-921fb74d
chrisl-921fb74d

Reputation: 23100

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.

Upvotes: 1

Mike
Mike

Reputation: 21659

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

Upvotes: 3

alegscogs
alegscogs

Reputation: 6743

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.

Upvotes: 2

Related Questions