Re: Better Variables through Custom Properties

On Mon, Oct 24, 2011 at 5:14 PM, Roland Steiner
<rolandsteiner@google.com> wrote:
> On Mon, Oct 24, 2011 at 16:39, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>
>> In this simple case, two custom properties are set on the root
>> element.  They inherit down to the h1, where they are referenced with
>> the data() function.  Here I'm assuming that properties prefixed with
>> "data-" are "custom properties", which are valid but defined to be
>> meaningless, similar to the data-* attributes in HTML.
>
> Just for clarification: In my original proposal I assumed that data() (there
> called apply()) can also reference any "normal" properties, which I believe
> could be useful (e.g., swapping colors). Do you envision this for data() as
> well, or do you see problems with this?

This is okay for some properties (for example, the currentColor
keyword is equivalent to your "apply(color)"), but it introduces
circularities elsewhere (basically, any property that is involved in
layout).


>> 2. Scoping gives us a useful form of "namespacing" as well.  If you
>> set a variable on the root of your component (Component Model or
>> ad-hoc), your variable won't show up for elements outside of the
>> component.  As well, if the same variable name was used outside your
>> component, it won't affect *your* styles either.  (This isn't perfect,
>> as "donut"-style components that contain arbitrary content will still
>> see your component's value, and not the global value.)
>
> This can be solved "manually": Suppose you use 2 "donut" components 'foo'
> and 'bar' that both use the variable 'data-color'. You can resolve the
> namespace clash e.g., by
> :root {
>   data-foo-color: red;
>   data-bar-color: green;
> }
> .foo {
>   data-color: data(data-foo-color);
> }
> .bar {
>   data-color: data(data-bar-color);
> }

Sure, that works if you *know* that the outside world has a variable
with a particular name that you don't want to squat on.  But it won't
help if you're unaware - you'll override the outer variable for your
contents.

~TJ

Received on Tuesday, 25 October 2011 00:19:08 UTC