Besides CSS variables, what are CSS custom properties used for?

Question

From a CSS Working Group post:

Custom properties are used for more than just variables [...]

Contradicting what a lot of people think (see this), this post confirms not only that variables and custom properties are not the same thing, but that custom properties may be used for other things than variables.

My question is about the last part. Has anyone ever come across some CSS code where custom properties were used for something other than variables?

Answer 1

The Stack Overflow answer you linked is actually not wrong, and is talking about something a little different from what you are asking. It talks about how, in the relevant CSS spec, custom properties are often described as variables for ease of understanding, despite the fact that they work differently from how variables in other languages work (but that's kind of par for the course with CSS, isn't it?).

The variable part of CSS custom properties is actually in how you call (or use) the custom property:

.example {
    background: var(--custom-property);
}

As you can see from the spec, fully titled "CSS Custom Properties for Cascading Variables Module Level 1", there is only one use: to be called as the value in a cascaded element with var(). So it's a little unclear what the author of that wiki post means when they say that custom properties are used for more than just variables. Further, the followup sentences don't really describe or backup that claim, they just talk about how using $ instead of - is "weird".

Perhaps they mean that you can declare a custom property that only works when read by JavaScript? Or declare a custom property in JS that is then applied to the CSS. The custom variables syntax supports equations that wouldn't be read properly by CSS parsers, but would be read properly in JavaScript. However, the result is still the property value of an element declared with var().

And to put the matter into some perspective, it wouldn't make sense to call them custom properties if they had a use for something other than in a property. The spec does not mention an alternative way to call or use a property in CSS or JS without using var() in a cascaded selector's property-value section (the bit of code between the {}).