Last Updated: November 12, 2017
·
6.458K
· xphong

Use Grunt Uncss to Remove Unused CSS from Your Project!

Uncss is extremely useful if you are using a large front-end framework like Foundation or Bootstrap because most of the time you will only be using around 10% of the css.

I recently used grunt-uncss on a Foundation 5 project and it brought the generated css file from 149kb to 6kb minimized.

app/css/app.css - file 5007 lines (4725 sloc) 149.149 kb
dist/css/app.css -  file 1 lines (1 sloc) 6.383 kb

The only problem I ran into was that uncss would ignore JavaScript generated css. However, you can add an ignore option so that it doesn't get rid of selected selectors.

Gruntfile.js:

uncss: {
  dist: {
    files: {
      'dist/css/app.css': ['app/index.html']
    }
  },
  options: {
    ignore: ['#ignoredselector', '.ignoredselector']
  }
},

4 Responses
Add your response

Genius!

over 1 year ago ·

Hey! Thanks for the awesome article. Can you point to a resource where we can use uncss with a dynamic site? Like php or js-generated views?

over 1 year ago ·

Unfortunately, the task only works with .html right now. I think dynamic generated sites would be hard to crawl through for selectors, but maybe there will be support in the future.

over 1 year ago ·

For this to work on Foundation 5, had to add this to options:
ignore : [/meta\..+/]
Otherwise Syntax error, unrecognized expression: [data-'Times New Roman'-abide] is thrown.

over 1 year ago ·