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.   
What is the reason that CSS variables are defined using two hyphen characters (--)?
css;specifications;development methodologies
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.