I’m using Sage Sage 9.0.0-beta.4 with Bulma. Although I have thinned out the CSS file by only including the Sass files I need I still have a bulky stylesheet filled with unused CSS rules. I have read about tree-shaking and purifycss in the context of webpack based projects but I’m a bit lost on how I would implement such practices in a Sage 9 project. Am I jumping the gun by looking into these solutions or is there a much simpler way of dealing with such a problem.
Thank you.
How big is your final CSS file? I assume you’re using gzip compression so you should consider the compressed size.
There’s always a bit of an efficiency price to pay for the convenience of a library like Bulma but you might find you can more than offset that by optimising a couple of image assets…
I know I’m not really answering your question but sometimes it’s not worth the time/complexity for optimisations like this. I haven’t tried purifycss but I imagine for it to work, it would need to see all your HTML and which classes are used. I don’t know how well it would handle dynamically assigned classes from JS/PHP. Please share if you go down this path 
I don’t know how well it would handle dynamically assigned classes from JS/PHP
Yes exactly.
My main.css file is 441 kB all up which I know is relatively paltry but scanning through it I can see a lot of unused CSS. Anyway, I’m meant to ship quite soon so I don’t want to convolute the development process with experimentation. If I do at some stage in the future I will comment on how it went in this thread.
I use purifycss with my theme. It doesn’t need to actually access the website, just the .php and .js files (it ~tries~ to understand dynamic classes as well).
That’s a lot of CSS but I assume that’s the uncompressed size you’re referring to? With GZip compression, the delivered size might be about 5-10x smaller. I’d be interested to know how much of a difference PurifyCSS makes if you get a chance to try it.
If you like using CSS libraries, you might be interested in Tailwind:
It’s a bit different to Bulma but I’ve been keeping an eye on it for a while and it seems to be very well thought out. They talk about how you can reduce file size here: https://tailwindcss.com/docs/controlling-file-size. I plan to try it on some future projects…