Re: Better Variables through Custom Properties

On Tue, Oct 25, 2011 at 9:45 AM, Roland Steiner
<rolandsteiner@google.com> wrote:
> On Mon, Oct 24, 2011 at 23:30, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> Another thought occurs to me.  Since I already want to allow variables
>> referring to other variables, for use in various functions and
>> whatnot, it seems like it would be incredibly useful to also allow you
>> to invoke the *inherited* value of a variable.  This would allow for
>> some *really* useful effects, such as building up an increasing value
>> as you descend the DOM:
>>
>> :root {
>>  data-indent: 10px;
>> }
>> ul {
>>  data-indent: calc( parent-data(indent) + 10px );
>> }
>
> This is actually the default I envisioned and described for apply(). IMHO
> it's more general than using the current value: it avoids circular
> dependencies, allows for easy swapping of values without "helper
> properties", etc.
> The downside that one couldn't use the current value inside the same rule
> block isn't a big drawback IMHO. Rather than
>
> :root {
>     data-foo: red;
>     data-bar: linear-gradient(transparent, data(foo));
> }
>
> you'd have to duplicate 'red' in both lines, or use another,
> previously-defined variable.

Duplicating red is called "not using a variable".  It means that when
you update your color in one spot, you have to update it in another
spot as well, which is somewhat the opposite of what we're trying to
accomplish.

It also means that, if you *do* want variables built on variables, you
have to put the secondary variable at a lower level in the tree.
Further, it means that in order to *use* a variable, it must be
already declared further up the tree.  Both of these make the
component use-cases more difficult than necessary, possibly
necessitating the use of extra HTML wrapping elements just so you have
enough levels to set up your variables.  This is all kinds of bad.


> OTOH, by using the inherited variable, one can
> do:
>
> div {
>     data-foo: data(data-bar);
>     data-bar: data(data-foo);
> }
>
> or even allow this to be used with non-'data' properties without causing
> dependency or problems with layout:
>
> [inverted] {
>     background-color: data(color);
>     color: data(background-color);
> }

Yeah, you do avoid circularities with normal properties when you do
this.  Sounds like an interesting idea to fold in as "at-risk".

~TJ

Received on Tuesday, 25 October 2011 16:57:11 UTC