Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

So we'd [previously discussed the `cond()` function](https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-626072319) as one of the "switch" variants, which would have effectively these exact semantics but grouped differently. That is, given Anders' example (lightly edited):

```
my-input {
    border-radius: 0px;
 @if (var(--pill) = on) {
  border-radius: 999px;
 }
}
```

it would be equivalent to the following using `cond()`:

```
my-input {
    border-radius: cond((var(--pill) = on) 999px; 0px);
}
```

(I wrote `cond()` as being essentially a math function, but simple equivalence for keywords seems reasonable to mix into here. These might want to use additional non-math comparators, like "is the value in this set", so we'd have to give it some thought and care.)

The benefit of the at-rule syntax is that it inverts the grouping - when you have a bunch of variants of several properties, the at-rule groups them by variant, while `cond()` groups them by property. Which is more readable varies case-by-case, but when it matters it can have a *large* effect on the readability, particularly when the variants don't all affect the exact same set of properties. Noticing that sort of variation can be very hard when looking across several `cond()` functions.

If we treat the two as exactly equivalent, just sugar variations of each other, then this does end up implying some slightly non-obvious behavior in some cases. For example, in:

```
my-input {
 @if (var(--pill) = on) {
  color: green;
 }
}
```

(Note the lack of "default" `color` in the block.) Then if `--pill` is `off` or whatever, `color` wouldn't just be not set, it would be IACVT and end up setting itself to `inherit`, which has some minor cascading implications. (This is presumably the behavior we'd define for `cond()` if you don't provide a default clause.)

I don't think this is a big deal, it's just worth understanding the implications. I think this is much better than defining this as an *almost* identical feature that actually works completely differently under the covers.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5624#issuecomment-741938899 using your GitHub account


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

Received on Wednesday, 9 December 2020 17:44:17 UTC