i’m doing lot of customisation to the css in roots and there seems to be an awful lot of code which does not need to be there – either through non-use or overwrites.
i don’t mind the bloat when i’m working locally, but i want it removed when i go live.
theres a few online tools which look at individual pages and tell you what’s not being used, but i can’t seem to find anything which complies a minified css file without the unused selectors.
is there a way grunt could automatically compile bloat free css?
I’m guessing that a lot of what you’re seeing is Bootstrap. Check out the Bootstrap docs to understand dependencies and the parts of Bootstrap code you’re using, then modify assets/less/bootstrap/bootstrap.less to comment out the LESS files you don’t need.
You can do something similar with Bootstrap’s JS to remove JS you don’t need. (Of course, the minified Bootstrap JS is only about 30K, vs. 91K for jquery and 15K for modernizr, so it might not be worth the effort.)
i have been commenting out the .less files i don’t use but there is still a tremendous amount of bloat from overwrites and the files i can’t comment out – for example i only use a tiny percentage of the grid system selectors and the rest are still compiled.
this website here for example identifies bloat and recompiles the css.
Well Bootstrap as a framework is going to have some duplicate CSS. Not just simply overwriting, but overwriting at different resolutions using media queries, overwriting if a class is added to a button or a message, etc.
I’m not sure exactly what bloat you’re talking about. It’s true, Bootstrap is a relatively large framework as far as CSS frameworks go, but it also has more features than most frameworks.
I would say either go through Bootstrap LESS files, find out what you will want and not want, comment out what you don’t want (and make sure it didn’t break anything), and that should get you where you want to be. Otherwise, you might just have to look at a lighter CSS framework.
So you want a task that looks at your HTML, inspects all classes, ID’s, and compare that against your CSS?
No, I haven’t seen that.
Keep in mind as well, that if you are building a dynamic website, which I assume you are, using Roots and Wordpress, that there is relatively large possibility that you will end up using some Bootstrap CSS in the future, even if your site doesn’t currently use it at this particular moment in time.
Trust me, everyone here is all about saving time, server queries, and cutting down on file size, but this seems like a little too much to me. With Roots and Grunt, your CSS file is already combined, concatenated, and minified. You may save a kilobyte or two by removing unused CSS, but it won’t be much more than a kilobyte. That’s 1024 characters.
thanks for the help. but i may have found what i was after.
i’ll give this a try and see what happens.
i know i’m probably being a bit silly wanting to have completely clean css as it doesn’t make too much difference, but after coming across the online tools i just thought it would be cool to incorporate into my local workflow as standard.
I know this thread is pretty old, but I stumbled upon it during research on this topic and thought I’d chime in. I have implemented the “uncss” grunt plugin and have had great results. That being said, it still isn’t perfect. It combines multiple uses of the same css selectors, but does not remove the values that are being overridden. For example:
body { background-color:#FFF }
body { background-color:#000 }
will end up as
body { background-color: #FFF; background-color: #000;}
I would like to see the first one removed since it is useless, but it really isn’t a big deal.
Yeah, this is THE unsolved problem with working with CSS. Unfortunately every project out there addresses the issue of “unused CSS” (which is poorly implemented and is unlikely to ever work if you dynamically assign classes with JS).
The issue is redundancy. ie: re-declaring the same thing multiple times.
If anyone knows a tool to fix this issue, I’m all ears.
