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

[css-variables] a more "Classical" approach

From: Rafał Pietrak <rafal@ztk-rp.eu>
Date: Wed, 04 Jun 2014 13:44:08 +0200
Message-ID: <538F0688.6060704@ztk-rp.eu>
To: www-style@w3.org

I've just run onto a draft spec of css variables extention, and I'd like 
to make a small commment on that subject.

1. although the need for such feature as css-variable is very real.
2. I don't think that the proposed syntax/semantics is the best.

In general, css syntax is build around "tuplets": <selectors> 
<open-brace>+<features/attributes defined>+<closing-brace>, e.g: "h1 

In additional to that, extremaly succesfull and popular jQuery library 
does capitalize on such "pairing", e.g: 

I think, that it would be in the spirit of css, it variables were 
defined just along those lines ... like by pondering a phrase: 

So I would rather propose, that:
1. one special character would be reserved to indicate "a variable 
entity", that charachter could be a "$" sign, to remind /bin/sh or perl; 
or something else.
2. "selector" defining a variable would be: "$name-of-variable { 
some-definition }"
3. the use of such variable would be: "some-selector { some-feature: 
$name-of-a-variable}" or "some-selector { $name-of-a-variable }".
4. semantics of such variables would be: change "some-feature" (above) 
on the selected nodes, according to "content" of a variable.

  $my-style, h1, $my-other-style { color: green; font-size: 120%}
  strong, $my-style { font-weight: bold}
  table tfoot a {font: $my-style}
  div.help { $my-style; border:1pt }

that way, font-size of an "anchor" in the table footer would be 120% 
larger then normal, *and* its font-weight would be bold, *similarly* to 
"h1" *and* "strong" in other parts of the document.

Meaning: a "$variable" *gathers* all the definitions it "selects".

In the last line of the example abore, provision is given to "dump the 
entire content" of a variable, to style some document part acordingly 
it... plus optional extras, in this case border style.

IMHO, such css-variables are simpler to "define and comprehend", then 
the proposed "--*" / "var()", and do not open gates to "programming", 
e.g. conditional behavior other then "cascading". The original proposal 
does allow for "if (x > 5) this.width = 10", which I think is simply wrong.


Received on Wednesday, 4 June 2014 11:44:55 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:43 UTC