Is there any difference between CSS custom properties and CSS variables?

Question

In all the materials that I read on the Internet, it seems that custom CSS properties and CSS variables are the same thing. However, at the end of the example, in the Inheritance of CSS Variables section of the Mozilla Developer Network documentation, there is this confusing statement:

Keep in mind that these are custom properties, not actual CSS variables. The value is calculated where necessary, and not stored for use in other rules. For example, you cannot set a property for an element and expect to receive it in a child child rule. The property is set only for the matching selector and its descendants, like any regular CSS.

Which gives the impression that these two concepts are not synonymous.

What is the difference between custom properties and variables?

Answer 1

A CSS custom property is the same as CSS Variable . But that sounds like some kind of awkward name.

They were not mistaken for the page title: Using custom CSS properties (variables)

However, the CSS variable is not a variable in the traditional sense, since it cannot be defined so that it is globally bounded, as in a programming language, or by a CSS preprocessor (LESS / Sass).

Even a custom property / variable limited by the root is not global. Changing the property value in a child will not change the value above or for brothers and sisters in this area. If someone expects to be global, this can be confusing, and I suspect that Mozilla writers are trying to point out.

if you look

w3.org Custom CSS Properties for Cascading Variables

This module introduces a family of custom authoring properties, collectively known as custom properties.

Custom properties are definitions that can be referenced using var(--my-custom-prop) . Like a variable!

quote continue ...

since you only need to change the value in the user property only once, and this change will be automatically transferred to all uses of this variable.

Awkward ... The above statement is wrong. The Mozilla Developer Network documentation seems to be trying to clarify this idea so that it is less confusing. Repetition of the original quote :

Keep in mind that these are custom properties, not actual CSS variables. The value is calculated where necessary, is not stored for use in other rules. For example, you cannot set a property for an element and expect to receive it in a child child rule. The property is set only for the match selector and its descendants, like any regular CSS.

They indicate that is not a variable in the traditional sense of a programming language. But this is calculated in the same way as styles, following general CSS cascade / definition rules.

Thus, var(--my-custom-prop) can resolve very different things based on where it is declared and that the ads do not extend to a higher area.

Here's the code to do without if you want to try it.

So, think of CSS Custom Property as CSS Variable , but be sure to remember that values ​​are cascaded and there is no global scope.

Answer 2

I looked at the page you linked; they are trying to explain cascading css. They say that the style depends on the parent selectors, and not on the given value, since you get into a variable.

The explanation attempts to clarify the difference between the css and vairable property in programming languages. If you already understand css, you don't need to worry about this explanation.

If we look at the example they provide:

 <div class="one"> <div class="two"> <div class="three"></div> <div class="four"></div> </div> </div> 

If you give class="two" properties, they will be applied to class="three" and class="four" .

If you reuse class="three" and class="four" in another class, for example:

 <div class="five"> <div class="three"></div> <div class="four"></div> </div> 

then they inherit any properties that you applied to class="five" that have nothing to do with class="two" .

All this assumes that class="three" and class="four" do not have their own properties. Say you assign a red color to class="three" , then it will be red in both cases, plus properties inherited from its parent classes.

Answer 3

To be clear, the specification is called Custom Properties for Cascading Variables . The key is in the word "Cascading"; custom cascade properties , like any other property with several key differences.

In everyday use, there is no difference between a “custom property” and a “CSS variable”; as for the authors, they are the same, just as “property” and “attribute” refer to the same in everyday use, although the correct terms are “custom property” and “property” respectively (CSS doesn't have attributes, any link per attribute, such as in attribute selectors and attr() , refers to attributes in host languages ​​such as HTML).

The name "CSS Variables", the slug css-variables URL specification and the notation var() , are all there to pathetic authors in recent years for variable support in CSS. The spectrum never canonizes the term "CSS variable", although it uses the word "variable" a couple of dozen times in its entire prose to facilitate the understanding of authors (which is strange because CSS specifications are not intended to be read by authors).

As MDN explains, custom properties are not true variables, such as programming languages ​​or even CSS preprocessors, although they have a lot in common. As mentioned above, cascading is what separates custom properties. These traits that they have in common are what authors really look for in "variable" support in CSS, and they are good enough for most of the needs of authors.

That's why everyone just calls them "CSS variables", although this is actually a bit wrong.

Answer 4

I believe that this simply means that if you have the following rules:

 #foo{ --my-prop: 10px; } .bar{ height: var(--my-prop); } 

with the following HTML:

 <div id="foo"> <div class="bar"></div> </div> <div id="sibling"> <div class="bar"></div> </div> 

then the height of div .bar in div #sibling will be 0, because the value --my-prop inherited only by descendants of #foo .

The language is confused. I think the author is probably trying to distinguish between variables in procedural languages ​​(like JS) and Custom Custom Properties. You cannot set a property and use it anywhere, for example, with a variable in another language.