_Skorzewiak_via_Alamy.jpg?#)
What is the reason that CSS variables are defined using two hyphen characters (--)?
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.
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.
