[css-variables] -- considered harmful

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
2. I still find it incredibly 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.

Custom Properties are - I did not change of opinion - a superb way
of nicely adding variables to CSS. But first, if they are 'properties',
I don't think we should be able to give the same name to a property and
a custom property; one could argue the names will never be the same
since -- is part of the custom property's name... I'm far from
accepting that argument as enough. I think we're making a very bad
decision allowing things like 'background: var(--background)'. I
perfectly understand the technical details here, and I am replying it's
also our duty to care about the non-technical details that matter
to our main users, web agencies.

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.

It's still time to offer better than what we have now.
My 0.02€.

</Daniel>

Received on Monday, 2 November 2015 09:58:12 UTC