This is a wild idea leaning into a more functional CSS style workflow. Still selectors, but properties and values are replaced with utility functions.
These functions can take familiar and named parameters, returning meaningful styles with a minimal author experience.
.component {
fontsize(2);
grid(1fr auto / repeat(3, 1fr));
anchor(--foo flip-block);
shadow(4);
radius(2);
ratio(square);
place(center);
}
would become something like:
.component {
font-size: 1.25rem;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: repeat(3, 1fr);
position: fixed;
position-anchor: --foo;
position-area: block-end;
box-shadow: var(--shadow-4);
border-radius: var(--radius-2);
aspect-ratio: 1;
place-content: center;
}
Why? #
The functions can take care of the implementation details while the author experience can focus on intent. It's almost like only being able to style with mixins, but you could of course write regular property value pairs if you wanted to.
The idea is essentially an expansion on how popular tokens are to use, like var(--shadow-4) and how much that variable can do. But this idea would allow shadow(4) to return both the propery and value. And it could also return many lines of CSS, like a mixin.
What's next? #
I dunno, just thought I'd share the idea. Could be worth exploring?
