7 ms·
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
by 1_player 6y ago
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.