We’ve begun using the Zurb Foundation framework, which includes a 176K stylesheet of everything that you might need just in case you need it. Well, for a recent one-page site, I guess that we probably wouldn’t need very much, so I sought ways to strip out unused CSS. How much could I shrink the 176K CSS file without breaking the page?
- Dust-Me Selectors – a Firefox extension that reduced it to 18k, with no noticeable differences in the performance of the page. Unused code could be commented out, or removed altogether.
- mincss – a Github project that reduced it to a responsive 10.5K, but the responsive slider stopped working.
- unused-css – a commercial service that reduced it to 73.8k. It removed most of the code from the media queries, so the page was no longer responsive, but the slider still worked.
- Chrome Developer Tools – told me how many unused CSS rules I had, but doesn’t produce a cleaned version.
As you can guess, your mileage may vary. Some tools will flag redundant CSS but not unused CSS, or removes code that is only used at certain screen widths, or don’t work with LESS/SASS. But Dust-Me Selectors worked fine for me, for now.
No comments yet.