- From: Rafał Pietrak <rafal@ztk-rp.eu>
- Date: Wed, 04 Jun 2014 13:44:08 +0200
- To: www-style@w3.org
- Message-ID: <538F0688.6060704@ztk-rp.eu>
Hi, 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 {color:red}" In additional to that, extremaly succesfull and popular jQuery library does capitalize on such "pairing", e.g: selectors/...do-something-on-all-selected-nodes. I think, that it would be in the spirit of css, it variables were defined just along those lines ... like by pondering a phrase: "select-a-variable". 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. Example: $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 } --end-of-example 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. Regards, -R
Received on Wednesday, 4 June 2014 11:44:55 UTC