CSS Custom Functions are coming

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google.

Exactly.

The comments here indicate that the article doesn’t do much to explain what this does or why you’d want it, but basically this gives you a way to reuse blocks of styles without needing to resort to e.g. utility classes or other hacks that get around specificity issues. The syntax doesn’t help explain that.

Shame about the syntax, but I’m used to it at this point.

@function --light-dark(--light, --dark) {

  result: var(--light);

  @media (prefers-color-scheme: dark) {
    result: var(--dark);
  }
}

If I had mind-boggling amounts of money, one of the things I would do is start an organization to name and shame and give anti-awards to websites that most abuse javascript and whatever-this-will-be. Or a dang mutual fund: "Like an index fund except we don't support companies with websites that require a ridiculous amount of control over the client computer."

Wait, who am I kidding: A real activist tycoon would probably just become a shareholder and make demands.

https://drafts.csswg.org/css-mixins-1/

I do think it's strange that using a wrapper like var() wasn't required here. Like func() or such. I'd actually rather that var() hadn't existed to begin with, but it should be consistent, at least.

So taking the article seriously and not just being glib:

This feels like a misunderstanding of how to write good CSS. Good CSS is a lot like SQL, which shouldn't be a surprise since it's centered around selectors. CSS is a set-based language. Adding general purpose functions that seem to abuse rule precedence to make conditional statements feels like a dirty hack to force CSS into an imperative model.

Now, maybe there is something to be said for the idea that, here we are, 30 years into having CSS, and people are still bad at set-description operations. Maybe there should be an imperative styling language. But it's a mistake to overload CSS to do it.

Usually with really bad syntax because the original design didn't expect that to happen.

Why? If the problem is JS bundle parse time, couldn't you just have a special kind of <script> tag that opts out of compilation and runs in interpreted mode only, and stick your layout JS in there? Having two entirely separate languages seems like such a waste of effort both on the platform side, and on the web developer side having to learn so many things.

That's nuts.

The web is developing in the wrong way.