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 kbThe 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']
}
},Written by Phong Huynh
Related protips
4 Responses
Genius!
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?
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.
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.
Have a fresh tip? Share with Coderwall community!
