Re: [css-variables] Why we can not use 'var()' function for normal property

On Wed, May 13, 2015 at 6:37 AM, BangSeongbeom
<bangseongbeom@hotmail.com> wrote:
> 'var()' function is limited for custom property only.
> Custom properties and normal properties should be treated equally.
> Like this:
> ..foo {
>     --wall: 100px;
>     padding-bottom: 50px;
> }
> ..foo .bar {
>     margin-top: var(--wall);
>     padding-top: var(padding-bottom);
> }
>
> And then we will change this function name to 'value()'.
> 'customcolor' keyword in [css-color] may be deleted.

Because of cycles.

To make var() work correctly, we need to check for "cycles" of custom
properties, like "--one: var(--two); --two: var(--one);".  When we
detect a cycle like this, we invalidate all of the properties involved
in the cycle, because there's no way to assign a consistent value to
them.

Theoretically, we could do this with normal properties too.  There are
several problems with this, though:

1. Some interactions between properties are implicit, and not
well-specified.  A lot of the layout-affecting properties are like
this, for example.  To find cycles correctly we need to know *all* of
the dependencies, and it's a lot more work, both now and in the
future, to correctly determine what all the dependencies are and keep
that information current and correct as we develop new features.

2. Assume we *did* document all the dependencies between properties.
These relationships aren't always obvious, and might only matter in
certain circumstances.  Thus, you can make a non-obvious cycle without
realizing it.  For example, 'width' affects 'padding-top', if
'padding-top' is specified with a percentage.  This means there's a
link between those two properties, and it can contribute to a cycle
accidentally.  This could result in very confusing styling failures on
a page, which are difficult to debug.  Custom properties are much
easier, because their dependencies are obvious.

3. We'd never be able to add a new dependency between properties ever
again.  If authors can add arbitrary dependencies between properties
with var(), then if we ever add a new implicit dependency, it might
create cycles in existing pages where there weren't cycles previously,
and break them.  This isn't acceptable - having properties react to
each other is pretty fundamental in CSS.

So no, we can't let var() refer to normal properties.  Rather than
trying to link two properties with var(), just set up a custom
property and use it in both of them.

~TJ

Received on Tuesday, 2 June 2015 16:16:48 UTC