Re: [css-variables] Proposed implementation needlessly complex

On Thu, Feb 9, 2012 at 7:42 AM, Ernie Bello <ernie@ern.me> wrote:
> Web developers have long taken advantage of CSS metalanguages like Sass or
> LESS to make the benefits of variables a reality before this spec was
> introduced. The problem I see with the spec as currently written is that the
> W3C's implementation differs quite a bit from the accepted conventions of
> these metalanguages.
>
> Variables should be easy: define a symbolic name for what you need and set
> it to a value. In order to retrieve the value, use the variable's symbolic
> name. To use Sass's implementation as an example:
> $link-color: blue;
> a { color: $link-color; }
>
> LESS's implementation differs only in the initial character used to define a
> variable, it uses the @ symbol instead of the $. In contrast, the W3C's
> proposed implementation is needlessly complex. The W3C equivalent to the
> above example:
> :root { data-link-color: blue; }
> a { color: data(link-color); }

I don't see how this is any more complex.  You set up a variable, and
then use it.  The syntax is slightly different, but that's it.

(Also, I think I'll add back the ability to do "color: $link-color;".
I switched to a function to make the proposal more palatable to many
in the WG, and to make it more extensible, but at minimum I think that
having $foo in addition to data(foo) would be good.)


> According to the W3C, defining a variable is accomplished by data-*
> properties[1]. That convention seems to have been proposed only due to the
> "similarity to the custom data attributes" in HTML5. The issue here is a
> matter of semantics. Data attributes in HTML do not define variables, but
> properties of an element, and more than one data attribute of the same name
> can and usually does exist in a HTML document. Using the same notation to
> define a variable name that shouldn't change doesn't make sense.
>
> Also, the use of the data function in order to output the property's value
> is confusing and results in more complex and less readable code. The return
> output of a function isn't a "variable" in the common sense of the term.
>
> I believe that the proposed CSS Variables spec should embrace the prior
> implementation lead provided by Sass or LESS. It will result in a clearer
> spec and acknowledge the practices already in use by web developers
> everywhere.
>
> [1] http://dev.w3.org/csswg/css-variables/#data-property

I only looked to the data-* attributes for naming inspiration.  The
*reason* for using properties to hold variables is that you get
limited scoping for free.  (Want to set or override a variable only
within a subset of the tree, perhaps just within your widget? This is
trivial now, but not trivial in SASS.  Want to use a variable as a
theming hook for your widgets (as illustrated in some of the examples
in the Web Components Primer)?  Nice and easy.

~TJ

Received on Friday, 10 February 2012 18:03:22 UTC