Re: [css-variables] -- considered harmful

On 2 Nov 2015, at 8:57 pm, Daniel Glazman <daniel.glazman@disruptive-innovations.com> wrote:
> 
> Hi there,
> 
> I just stumbled upon a set of slides authored by Wilson Page from
> Mozilla about WebComponents in Gaia. And in this set, I found the
> following slide (please note these great slides are just a live
> example of CSS Variables usage and I link to a screenshot of them here
> only as such):
> 
>  http://pbs.twimg.com/media/CSyy2UGWcAA2lbh.png
> 
> Reading this slide triggered many, many comments here.
> So I'd like this mailing-list to record my POV on the -- syntax:
> 
> 1. I still find it our ugliest syntactic decision in 20 years

I like the -- prefix.  But var(--foo) is ugly.  If we need to separate the names of real properties with custom properties, I think --foo is fine.  Visually it works better for me than var-.

> 2. I still find it incredibly error-prone

It would be good to know what specifically you find error-prone.

> 3. it allows an author to write the perfectly valid
> 
>   .two-columns {
>     column-count: var(--column-count);
>     -moz-column-count: var(--column-count);
>     -webkit-column-count: var(--column-count);
>     --column-count: 2;
>   }
> 
>   and such a rule seems to me so awful I'm shaking my head in despair.

I’m not sure what you gain from outlawing this.  The point of having some kind of syntactic distinction between real properties and custom properties is so that you don’t need to worry about collisions (as you mention).  I’m also not sure how the -- prefix affects this, as you’d have a similar problem with $.  Unless you are arguing for no syntactic distinction at all between real and custom properties?

...
> Second, from a readability and maintainance point of view, even $foo
> would be better than --foo. Unfortunately, $foo is impossible to avoid
> collisions with CSS preprocessors. But that's probably not a good enough
> reason to pick up a double dash. If $foo is universally understood as a
> variable, --foo is universally understood as a decrement. A very bad
> choice again.

Well, I don’t mistakenly think that the -- in “ls --help" is a decrement operation. :-)

FWIW I think it’s unfortunate that we need to use var(--foo) to reference variables.  I can understand that there is a need to distinguish mentioning custom properties versus using them, but I think we’ve got the syntax around the wrong way.  In the future, once we can define how custom properties can be animated, we’ll need to be able to mention custom properties in transition-property.  But beyond that, all other custom properties in property values are uses.  Why force var() to be used for the majority use case — using variables — and not use extra syntax in transition-name, something that will be less common?

If I were starting over, I’d use non-var()-wrapped custom property names to expand variables, and some other syntax like custom(foo) in transition-property:

  :root {
    --theme-main-color: #123;
  }

  div {
    background-color: --theme-main-color;
    transition: 1s custom(theme-main-color);
  }

  div:hover {
    --theme-main-color: #456;
  }

You’d want to keep var() around in case you needed to supply a fallback value.

Received on Wednesday, 4 November 2015 04:15:34 UTC