Re: [csswg-drafts] [css-values]: Express conditional values in a more terse way (#5009)

So I'll start by saying I get the urge here - the current MQ situation is definitely a bit annoying.  Either you have to duplicate your whole stylesheet into each MQ, meaning that the same rule shows up in different versions spread across the entire sheet (making it hard to ensure you keep everything up-to-date while editting), or you keep rules together but have to duplicate the MQ over and over again.

This syntax, tho, and likely anything close to it, is unworkable. It depends on the MQ you're differentiating on to be only a single condition's value, and the properties you want to set differently based on MQ to all be exactly the same (or else duplicate the same "initial" value across several of the clauses). And that's not even getting into the actual syntax shenanigans; maybe we could work this with a `;` separator, if it was always setting the whole value for the property.

That said, I think the core problem will get better if we keep pushing on MQ improvements, namely (1) letting you nest MQs into style rules, and (2) letting you set custom MQs or full custom at-rules.

The example above is a lot better if written as:

```css
.text-box {
  @media (--size:small) {
    font-size: 24px;
    padding: 50px;
    margin: 50px 25px;
  } @media (--size: medium) {
    font-size: 20px;
    padding: 30px;
    margin: 25px 12.5px;
  } @media (--size: large) {
    font-size: 16px;
    padding: 10px;
    margin: 12.5px;
  }
}
```

Or even, with a custom at-rule that just transforms itself directly into an @media rule:

```css
.text-box {
  @--small {
    font-size: 24px;
    padding: 50px;
    margin: 50px 25px;
  } @--medium {
    font-size: 20px;
    padding: 30px;
    margin: 25px 12.5px;
  } @--large {
    font-size: 16px;
    padding: 10px;
    margin: 12.5px;
  }
}
```

Or going a step further, with a custom function that evaluates a predefined MQ and selects a value accordingly:

```css
.text-box {
  font-size: --page-size(24px; 20px; 16px);
  padding: --page-size(50px; 30px; 20px);
  margin: --page-size(50px 25px; 25px 12.5px; 12.5px);
}
```

All of these should be possible in the future; the latter two would require a bit of JS to work, but not a complex amount.

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

Received on Tuesday, 28 April 2020 16:47:49 UTC