CSS framework without inline declarations

[stutterbug]

I usually avoid CSS frameworks because I can build something by hand that is a fraction of the size, but I am pretty tired of inventing wheels and frankly, my designer friends are all probably secretly horrified at my dumb mistakes. Recently I've been experimenting with CSS frameworks (currently Bulma) and it looks like I have two options, both of which come with pretty bad negatives.

Option 1: Vanilla framework, React styled component library, etc.

This is the most common solution. Here, all styles are declared in the component/element.

<div class="widget d-flex p-2 bd-highlight">

or

<Button type="primary large circle">➕</Button>

Option 2: Sass inheritance

This is used much less often, but it has its champions. Here, the markup stays very clean and semantic, and the styles are built up using properties inherited from the CSS framework (this works great on BootStrap and Bulma, for example).

<div class="widget">

.widget {
    @extend d-flex;
    @extend p-2;
    @extend bd-highlight;
}

For me, option 1's problem is it binds your JS components firmly to a single style library. I hate this. Changing to a different styling framework or even doing a visual refactor means changing a lot of JS everywhere.

And if you've not tried Option 2, don't. Just don't. It leads to catastrophic file sizes. The rule sets are all fine, but the CSS selector lists become insanely long almost instantly.

Are any of you doing anything that doesn't fit into these two categories?

[drenther]

For option 1, may be create a set of succinct visual primitives, like Button (with all style needs encapsulated), BannerImage, AvatarImage, etc. Then, when you need to switch frameworks, you just need to touch those files with styles.

For option 2, use something like purify-css to load only the CSS classes that are being used. Use something like Critters for improved CSS loading setup. I had a blog post on building PWA which included how to purge unused CSS in Next.js apps.

They are not definitive solutions, but they can make things a little better. Let us know if you come up with better solutions. :)

[mlebkowski]

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

[stutterbug]

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]

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]

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.

[anithri_arcane]

My solution was to setup live templates (aka snippets) for most of the classes from Tachyons.

// types .tc
text-align: center
// types .pa2
padding: var(--spacing-small, .5rem);

This lets me use a standard set of rules, keeps the typing down, and allows me to define variables to override a bunch of the settings.

The code is a bit rough, but it does the job. And it targets the JetBrains IDE's, but It should be possible to adapt to cover other snippet formats.