CSS Custom Functions are coming

This is exactly the sort of propaganda which encourages making sites that don&#x27;t work in any browser but Google&#x27;s. If web developers would just focus on making simple and widely-accessible sites instead of churnful trendchasing, the browser monopoly wouldn&#x27;t exist.<p><i>Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google.</i><p>Exactly.

This is it. This is all I’ve wanted in CSS for the last decade. In fact, I just wanted basic mixins without function-like behavior, but this gets me there.<p>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.<p>Shame about the syntax, but I’m used to it at this point.

Thanks. Looks hideous.<p>@function --light-dark(--light, --dark) {<p><pre><code> result: var(--light); @media (prefers-color-scheme: dark) { result: var(--dark); } }</code></pre>

Was <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;JavaScript_Style_Sheets" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;JavaScript_Style_Sheets</a> right all along?

Oh man, and I thought the current JS status-quo was already full of vulnerabilities and privacy risks.<p>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: &quot;Like an index fund except we don&#x27;t support companies with websites that require a ridiculous amount of control over the client computer.&quot;<p>Wait, who am I kidding: A <i>real</i> activist tycoon would probably just become a shareholder and make demands.

I look forward to writing Typescript that transpiles to Javascript that writes CSS that calls functions.

This feels like a really bad idea, I hope it doesn&#x27;t make it into the browser. CSS Houdini would be a better path to take.

It seems like the spec draft itself offers a much better example than the article.<p><a href="https:&#x2F;&#x2F;drafts.csswg.org&#x2F;css-mixins-1&#x2F;" rel="nofollow">https:&#x2F;&#x2F;drafts.csswg.org&#x2F;css-mixins-1&#x2F;</a><p>I do think it&#x27;s strange that using a wrapper like var() wasn&#x27;t required here. Like func() or such. I&#x27;d actually rather that var() hadn&#x27;t existed to begin with, but it should be consistent, at least.

Taking bets now on how long after release it takes to end up with someone making a &quot;JS in CSS&quot; framework, but with the added wrinkle that they have to be serious about it, not just doing it as a joke.<p>So taking the article seriously and not just being glib:<p>This feels like a misunderstanding of how to write good CSS. Good CSS is a lot like SQL, which shouldn&#x27;t be a surprise since it&#x27;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.<p>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 <i>should</i> be an imperative styling language. But it&#x27;s a mistake to overload CSS to do it.

Why stop there? Why not add interfaces, OO and design patterns while we&#x27;re at it? Then CSS will be a &quot;real&quot; language.

I&#x27;m confused at all the negativity? I am personally very excited for this feature, it&#x27;s going to enable one to use less JavaScript,and CSS to accomplish things that should be easy.

Today on &quot;everything that&#x27;s wrong with modern web and more&quot;

This is yet another example of how declarative languages almost always evolve into full programming language if popular enough.<p>Usually with really bad syntax because the original design didn&#x27;t expect that to happen.

I don&#x27;t know how the web does it. There are so many cool things being added. How do they keep the spec manageable? What if someone wanted to build a compliant web browser from the ground up?

Finally, the inverse of CSS-in-JS.

Looking forward to DoomCSS

OK but how about they fix broken CSS variables first before this?

DOOM in CSS when?

Why not just use CSS-in-JS at this point? With functions and if statements, you now have two full Turing-complete programming languages in the browser.<p>Why? If the problem is JS bundle parse time, couldn&#x27;t you just have a special kind of &lt;script&gt; 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.

&quot;Your scientists were so preoccupied with whether or not they could, they didn&#x27;t stop to think if they should.&quot;

Is it time for <i>&quot;CSS: The Good Parts&quot;</i> ?

functions in stylesheets?<p>That&#x27;s nuts.<p>The web is developing in the wrong way.

oh the horrible css syntax.... brrrr

I wish we&#x27;d just admit we&#x27;re heading for SASS and use that. It&#x27;d save a lot of hand-wringing and time spent justifying adding each feature.

There is so little to write about and so much to overengineer about our text systems that all we can do now is endlessly debate punctuation.

Why do we allow Google to singlehandedly keep pumping garbage into the web ecosystem? Do they own W3C?

The syntax might kind of suck but this will actually be very useful to have.

holy shit I need to retire soon

No worries, the web is already went wrong from the original purpose. Google is outdated itself. Better they update their own blog spot site layouts&#x2F;functions before touching the web.