RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
.component { fontsize(2); grid(1fr auto / repeat(3, 1fr)); anchor(--foo flip-block); shadow(4); radius(2); ratio(square); place(center); }
A series of images of an avatar doing a bunch of skateboard tricks.

A functional CSS concept

2 min read
css

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?

Mentions #

Join the conversation on

10 likes

@argyleink Interesting. My first reaction is that it’s a bit… opaque, maybe? I think for me, this is maybe one step too abstracted from ordinary CSS. I’m a fan of the Functions & Mixins proposal currently in CSSWG, and I think part of that is because it seems to be values only, i.e. incapable of being a macro for multiple properties. In an alternate timeline where at-apply (RIP) and functions/mixins both existed, I reckon I would find that more intuitive.

IronIron

@argyleink 100% hate it

clausclaus

@argyleink i always thought “Mixins are really clever and you can probably do a lot of stuff with it that makes your life easier” and then I ended up never using them. Can’t really say why.

Nils BinderNils Binder

Crawl the CSS Webring?

previous sitenext site
a random site