- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 10 Feb 2012 10:02:31 -0800
- To: Ernie Bello <ernie@ern.me>
- Cc: www-style@w3.org
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