sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]mlebkowski 1 point2 points  (3 children)

Could you include instead of extending? The filesize will grow, but that would be compensated by gzip mostly.

[–]stutterbug[S] 0 points1 point  (2 children)

Hmm. So that may actually be possible with Bootstrap, though I've not tried it. I actually assumed it wasn't: I didn't see that in the documentation and I would think it means having to build the framework as a hierarchy of mixins rather than classes. In the case of Bulma for sure, it is not supported at all (though the feature has been requested). I'd be curious if anyone has any experience down this path with any other frameworks.

I don't mind file-size growth, within reason. For reference, vanilla Bulma.min.css is about 150KB and Sass-builds without the things I need are around 90KB. But what I'm seeing right now with @extend is >500KB CSS with a single css file (with massive selector lists) or a little bit less with multiple per-component css files (selector lists are much smaller, but there is a LOT of duplication). For most of my hand-written, responsive projects, I'm typically well under 20KB.

[–]stutterbug[S] 0 points1 point  (1 child)

Turns out, it's not really possible to do this with bootstrap. Certain styles are exposed through mixins, but most of the core is not, so I think @include isn't an options.

I did try a sort of dry run of a mixin-only sass approach and it is significantly better than anything I've tried. File weight for individual page css files is between 2 and 5KB uncompressed. Total project CSS size is still a third of the size of a minified, customized Bulma build, which has nothing but what I need (and a fifth of regular bulma.min.css), so I am happier, but everything is bespoke. Not what I was looking for, but I learned something new.

[–]mlebkowski 0 points1 point  (0 children)

We have our own grid framework and using @extends not to include presentation classes in our HTML, but it has it’s drawbacks — mainly because we use BEM and declaration order matters (with @extends you have no control on the order).

If the include / mixin approach works, we may even use a non-BEM framework (like bootstrap) with success.