[css-variables-2] Is it possible in the future to allow variables to be defined outside the elements' {}?

[LIXiangChen]

What I mean is that when defining CSS variables, it is not necessary to write it in the elements' {}, which is equivalent to a syntactic sugar, and the variables are implicitly bound to the :root element.

For example, the following two codes will be equal:

@media (max-width: 800px) {
    --foo: 123;
}

@media (max-width: 800px) {
    :root {
        --foo: 123;
    }
}

[tabatkins]

No, this can never happen. Mixing properties and selectors at the same level is problematic - see the long discussion in #7834, where we have to do a lot of work to allow mixing properties with nested selectors.

In particular, the current solution in the spec for nested rules disallows starting a selector with an identifier (aka a tagname selector), which we definitely can't retroactively apply to all existing CSS. ^_^

[LIXiangChen]

@tabatkins Got it. Thanks.