RE: [css-variables] var() for non-custom properties

> Is there some reason that var() can not be used for non-custom properties?

It depends. If you want to use the computed value of a property, you'll be out of luck, because that would create inadvertent cycles. Think about:

    ELEMENT {
        width: var(padding-left);
        padding-left: 50% /* of the width */;
    }

If you want the specified value, the previous example would work but provide the surprising

    ELEMENT {
        width: 50%;
        padding-left: 50% /* so 25% of parent bfc's width*/;
    }

> Except shorthand, it would be a good idea.

And this is the second issue.

    ELEMENT {
        border-left-width: 10px; /*overriden*/
        border-width: 5px;
        width: var(border-left-width); /* would have to be 5px, but that means we resolved border-width. okay, hold on */
    }

Not let's suppose that we did this instead:

    ELEMENT {
        border-width: 5px;
        border-left-width: 10px;
        width: var(border-width); /* even if this was valid, this means we have to reconstruct the shorthand, which is hard */
    }

Now the issue is that any propery can become a shorthand at some point. See for instance display which could have been divided into "display-inside" and "display-outside" and that would make old code break if the browser engine doesn't do a lot of work to make things up for it.

That why it was ruled out. Even if this is possible in theory, this requires too much work to be worked out by browser vendors. Just do this instead:

    * {  border-width: var(--border-width)  }
    ELEMENT {
        --border-width: 5px
        width: var(--border-width);
    }


> We're already using a similar mechanism such as var() for non-custom 
> property; currentcolor. 

We should definitely introduce more keywords like this for things that could be safely expressed this way. I would love to have currentBackgroundColor for instance.

Best regards,
François