CSS variables supported natively it's a powerful feature to develop complex web apps without some additional step as preprocessors. So, this is fantastic.

But (at first) the syntax of defining variables does not look very good.

element {
  --main-bg-color: brown;

element {
  background-color: var(--main-bg-color);

What is the semantic reason to declare/define/access (new supported) variables in CSS using TWO (--*) characters?

I think this way to declare variables (maybe) can make the use of BEM methodology (Block Element Modifier) confusing because the identifier (--*) already has a semantic value: represents a modifier.


1 Answer 1


When CSS Variables were introduced, there needed to be a syntax that does not clash with existing CSS versions, and allows future CSS versions to declare new properties. Properties that begin with a double-dash won't ever be used by CSS itself, so they can be used by other people. Since these custom properties aren't declared with any new syntax, they are simply ignored by CSS parsers that don't know about them. This is similar to vendor prefixes like -moz-* or -webkit-* that aren't standardized, and are ignored by other browsers. If you want to, you can view the -- prefix as a null namespace for your own use.

So while this syntax is extremely ugly, it has a certain elegance since variables are just a kind of property, which has beneficial interactions with things like animations. It is irrelevant that this confuses people who use a certain naming convention. You can still use this naming convention, but you just have the double dash at the front. Other languages begin all variables with a $, and no one complains either.

  • 1
    Well, I complain. The $ convention is hideous. Mar 4, 2016 at 16:18
  • @RobertHarvey :D yes, it's certainly not ideal – except that it allows simple string interpolation, which is extremely useful in text processing languages like Bash, AWK, Perl, and PHP. Now I'm with you if you start ranting about the cmd.exe %var% insanity, that is just wrong…
    – amon
    Mar 4, 2016 at 16:24
  • Good points were explained. Mar 4, 2016 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.