[csswg-drafts] [css-values] A more structured format for complex CSS values? (#6519)

proimage has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] A more structured format for complex CSS values? ==
https://www.w3.org/TR/css-values-4/ (I think...?)

CSS complexity is increasing, yet the ways we have to represent that complexity have not kept up. Currently, some CSS properties can have quite complex values, which in any "normal" programming language would be represented by an associative array (a.k.a. key-value array), but in CSS have to be represented in a simple string, with no "labels" for any of the sub-values.

As an example, look at how we specify a gradient for `background-image`:

background-image: [linear|radial|conic|pearShaped]-gradient([direction] [origin side], [color-stops]) [, rinse-and-repeat];

...and you all know how complex that innocent-looking `[color-stops]` can be. 🙄 

Another example is `box-shadow`:

box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2) [, rinse-and-repeat];

Both of these properties (and others like them) force authors to arrange "sub-values" in a single string, where the order of each sub-value is both vital and non-obvious.

Is it time to consider giving CSS a more structured data format (i.e. an associative array)?

@LeaVerou [graciously pointed out](https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-897570073) that this "is not idiomatic to CSS and thus inconsistent with the rest of the language."

I respectfully disagree: is the entirety of CSS itself not already an associative array?

    [key]: [value];
    [key]: [value];
    /* etc */

Is it impossible to consider allowing `[value]` to itself be an associative array?

/* fake code; don't try to use this */
box-shadow: {
    inset: true,
    x: 1px,
    y: 1px,
    blur: 1px,
    spread: 1px,
    color: rgba(0, 0, 0, 0.2)
Obviously considerably more verbose, but also considerably less ambiguous and more flexible. 

I'm not proposing that this be applied or allowable for any of the simpler values (`font-size: { size: 18px }` would be a bit ridiculous... 🤣), but I do think there could be room to allow this type of value format for the properties with more complex values.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6519 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 15 August 2021 19:05:56 UTC