W3C home > Mailing lists > Public > www-style@w3.org > June 2012

Re: [css-variables] Putting it all toegether (syntax)

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Tue, 05 Jun 2012 01:58:36 +0400
To: François REMY <fremycompany_pub@yahoo.fr>
Cc: CSS 3 W3C Group <www-style@w3.org>
Message-Id: <374711338847116@web17f.yandex.ru>
04.06.2012, 20:36, "François REMY" <fremycompany_pub@yahoo.fr>:
> 8.    Sum it all up
> Here’s finally a sample file based on my syntax proposal:
>     :root {
>         my-link-color: red;
>     }
>     header {
>         my-link-color: white;
>     }
>     a {
>         color: $my-link-color;
>     }

I tend to consider repeating prefix (be it `my-` or any other) when using a variable somewhat redundant.

Moreover, the need for prefixing itself is farfetched. Prefixing can be easily avoided while still having same advantages (inheritance, cascading, etc.) as currently drafted CSS-variables proposal has.

The solution I propose is to use @-rule with scope selector passed as its _argument_:

    @variables (:root) {
        link-color: red;

    @variables (header) {
        link-color: white;

    a {
        color: $link-color;

This clearly and completely removes the need for prefixing AT ALL while making variable name consistent for both defining and reading the variable.

Also, using value in the my proposal has $ token-mark while defining value does not have $ (in the same way as recent François's proposal, but with no prefix). This clearly separates defining variable and its using.

As a result, it allows CSS-variables' features to be unambiguously extended in future (if it will be considered needed) to make it possible to use variables not just in property values but also, for example, in property names:

    @variables (:root) {
        tf: transition-timing-function;

    /* Equivalent to `transition-timing-function: ease-in-out` */
    .example {$tf: ease-in-out; }

Also, having dedicated @-rule for variables makes difference between defining variables and regular properties much more clear and intuitive since, unlike the current CSS-variables draft, defining variables and regular properties declarations are not mixed with each other in one rule (or in several rules of same type).

Summing up my proposal:

1. variables are defined using @-rule like @variables;
2. variables have no prefix (like var- or x-) at all: neither on defining nor on using (prefix is just completely unneeded);
3. variables has $ token mark when (and only when) they are used;
4. variables feature-set is the same as provided by the current CSS-variables draft, including inheritance, cascading, etc.;
5. so we loose nothing, while getting significant benefits:
    5.1. clear separation between defining variable and its using;
    5.2. ability to extend variables in future to be used not just as property values;
    5.3. no redundant and unintuitive prefixes.

Received on Monday, 4 June 2012 21:59:09 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:00 UTC