
Bonsai CSS – an ultralight utility-first CSS framework - feross
https://www.bonsaicss.com/
======
rbinv
Soon, someone will proudly invent a way to refactor all these utility classes
into sheet-like files with cascading styling rules.

~~~
quantummkv
You really might be on to something here. But what would we call such a
revolutionary idea?

Oh I know. We'll call it Cascading Style Sheets.

~~~
bradgessler
I believe it would be Cascading Cascading Style Sheets

------
montroser
There is some clever (maybe too clever) stuff in here, but isn't this pretty
much inline styles with new non-standard albeit shorter property names?

If I'm going to have to add `style="\--bg:cyan"` all over the place, I'd
rather just stick with the standard `style="background:cyan"` so that my dear
colleagues and I can avoid having to learn and relearn whatever cute names
each next microframework comes up with.

In my experience, functional CSS can be great if it's limited to a very small
set of very common properties with a smallish set of common values. But this
seems much closer to how we did in the 90s back when it was a free-for-all...

~~~
ciar4n
Just to mention the conventional inline styling like `style="background:cyan"
does have some limitations, mainly that they cant be responsive and cant
effect pseudo-classes.

~~~
montroser
Yeah, fair point.

A long time ago there was a proposal spec for styling pseudo classes via
inline styles, but it didn't take.

------
1_player
I'm a fan of functional CSS, so no argument from me on that front but:

    
    
      <div style="--mb:1.5rem; --maxw:400px;">
        example
      </div>
    

is associated with this stylesheet:

    
    
      [style*="--mb:"] {
        margin-bottom: var(--mb) !important;
      }
      [style*="--maxw:"] {
        max-width: var(--maxw) !important;
      }
    

That can't be very efficient. Also, to make this work all the rules are
!important.

I think I'll stick with Tailwind, this doesn't seem to offer any improvement
over it, and in fact might be much slower than using classes or ID have
heavily optimised lookup paths.

EDIT: I think the "killer feature" this has compared to other functional
libraries is that you're not constrained to any value scale: you can have a
margin of 1.37px if you want, without having to update your CSS. Personally I
think being constrained to a scale, and making arbitrary values harder to use,
is actually helpful.

------
Conlectus
It's unfortunate that what would previously have been a mixin using a CSS
preprocessor is now implemented using (often massive) stylesheets with mostly
duplicated implementations.

~~~
tln
Are you commenting on a trend or Bonsai CSS? Because 8kb doesn't seem too bad

~~~
httpsterio
but how much does it bloat your HTML files up compared to BEM-tyoe naming?

------
sfusato
In the 'Questionaire' example, the label is always for 'checkbox-1'.

------
kevsim
Just a nit - the sliders are not very easy to work on my phone (iPhone Safari)

------
rado
Sigh

