Re: [css-variables] ...let's change the syntax

Hi,

Chris wrote:

>>> Aesthetically, I find underscores in CSS files displeasing.

Agreed. It's really ugly. I really hope we can avoid using underscore in
the other custom cases Tab mentioned too.

Chris wrote:

>>> _property is a common CSS hack targeting IE6. So those in-the-wild
>>> stylesheets would suddenly start being interpreted as variables by
>>> modern browsers.

I agree this is a problem, though maybe it isn't that big of a problem.

Chris wrote:

>>> An issue we're bumping into in the sass community now is namespace
>>> collisions from 3rd-party libraries. It would be nice if CSS could
>>> avoid our mistake by forcing a namespace for custom properties.

Yeah, both the existing var-* syntax and the _* alternative do not
impose any kind of namespacing. It's only achieved via convention.

Tab wrote:

>> That's why I'd prefer "underscore anywhere in the name" over "leading
>> underscore" - you can put the namespace before the underscore,
>> leading to a nice visual separation.

You *can*, but you don't *have to*. François' variation addresses
Chris/SASS's need better:

> In the light of the first paragraph of this mail, I think we should
> probably prefer "an underscore anywhere (except in the first position?)"
> because it forces to use a custom prefix, and escape any IE6-era issue
> altogether.

This helps the SASS 3rd-party library problem, but it imposes a (slight)
cost on authors of smaller pages, who would otherwise not have a prefix
on their variable names.

Brian wrote:

> Since we have -[vendor]- for custom vendor things, we could just reserve
> -- for 'no vendor, just custom'... At least it's explainable/consistent.

Vendor prefixes and custom properties are different features that
address different use cases, so I think they should be syntactically
distinct. Your double-hyphen combined with François' idea might work:

foo-bar-baz: standard CSS property named foo-bar-baz
foo--bar-baz: custom property bar-baz in "namespace" foo

Suppose we went with this. What do things look like in var()?

  * var(foo--bar-baz, fallback)
  * var(foo.bar-baz, fallback)
  * var(bar-baz, foo, fallback)
  * var(bar-baz, fallback, foo)

I'm not crazy about any of these var() options.

I think we should stick with the status quo of "var-*".


Ted

Received on Friday, 14 March 2014 18:23:58 UTC