Summary

  • The W3C's first public CSS Variables draft of 10 April 2012 named the cost of repeated style values and proposed variables that followed the cascade. Its early syntax used names such as var-color and references such as var(color).
  • The 3 December 2015 Candidate Recommendation used --main-color with var(--main-color). The 16 June 2022 Candidate Recommendation Snapshot described fallback values and the handling of missing or circular references. A shared color could travel through a branch of the document while a local component chose another.

The editor wanted the site accent changed from burgundy to a slightly less solemn burgundy. The old shade lived in buttons, links, notices and a headline somebody had styled three redesigns ago. A search of the stylesheet found more copies than a meeting memo left on office chairs. Change one, miss another, and the page would look as if half the staff had not read their email. CSS variables promised a better courier: give the value a name, then let the places that use it ask for that name.

The W3C's first public CSS Variables Working Draft of 10 April 2012 began with precisely this maintenance problem. Large style sheets repeat colors and other values, and a find-and-replace can be awkward when the same characters mean different things in different places. The draft introduced variable properties that an author could name and refer to in ordinary CSS values. Its example kept a shared color near the root of the document and let descendants read it. The idea was not to send a literal text replacement across files; it was to let the normal CSS cascade decide which named value applied to each element.

The syntax in that first document is a useful bit of archaeology. It wrote names such as var-color and read them with var(color). A rule on a div could set a different color from the root, and a specific alert could set another one again. The sample produced different colors within one tree because each element used the value available in its own place. The root's memo travelled downward, but a local office could send an update. That is what made the new value more than a central clipboard.

The draft also confronted a family argument that CSS cannot solve by asking everyone to agree. One variable could refer to another; two could refer back to each other. The document described such circular dependencies as invalid variables. A button asking for a color from a circular chain will not discover a secret winning shade hidden at the end. There is no end. The browser has to resolve the value according to the rules and let the dependent declaration behave accordingly. Naming things made styles easier to manage; it also made dependencies visible.

By the W3C Candidate Recommendation of 3 December 2015, the familiar spelling had arrived. A custom property began with two dashes, as in --main-color, and an ordinary property used var(--main-color) to read it. The specification's example set a main color on the root and used it in other rules, including an accent background derived from the main color. Change the named value and the places that use it change with it. The newsroom could send one color memo instead of searching for forty old copies.

The cascade was still in charge of delivery. If a component defined its own --main-color, its descendants received that local value. The site could remain burgundy while a particular panel turned teal. That makes custom properties well suited to themes and components, but it also makes debugging a matter of finding where the value actually came from. A name printed in one stylesheet is not a guarantee that every button receives it. The relevant declaration is the one that wins for the element after cascade and inheritance have done their work.

The W3C Candidate Recommendation Snapshot of 16 June 2022 spelled out how a component could keep its manners when no memo arrived. In var(--header-color, blue), the second argument is a fallback. A component can carry a default and still let a larger application provide its own named value. The specification notes that the fallback may contain commas; it is the material after the first separating comma, not a tidy list of separate emergency choices. The mechanism lets a reusable component ask for a theme without demanding that every host fill out a form first.

A fallback is useful because missing values and circular references have consequences at computed-value time. The browser may parse a declaration containing var() before it knows the value that will be substituted. If the chosen custom property is unavailable or invalid and no usable fallback supplies a value, the dependent property cannot keep that declaration's intended result. In a design review, the visible color is the outcome to inspect: did the component inherit the named value, choose its local override, use its fallback or lose a declaration after a bad reference? The answer sits in the cascade and computed style, not in the first occurrence of the name found by search.

The three W3C publications mark a real change in both language and detail. The 2012 Working Draft used var-color and var(color). The 2015 Candidate Recommendation used --main-color and var(--main-color). The 2022 Candidate Recommendation Snapshot refined the account of fallback and invalid values. A screenshot of the early syntax cannot stand in for the later interface. The continuous idea was that a style value could be named, inherited, overridden and substituted where a property needed it.

That changed the editor's job. Instead of hunting down every burgundy literal, the team could decide where the accent belonged and name it at the right scope. A global rule could send the memo to the whole design; a nested component could answer with teal; a portable widget could keep a fallback in its desk drawer. The browser handled distribution through the cascade. The editor still had to decide whether the alert panel really deserved its own color and whether the resulting page looked like one publication. At least the buttons could no longer claim that the announcement never reached them.