Re: [csswg-drafts] [css-values-5] What is the MVP for inline conditionals on custom properties? (#10064)

@LeaVerou has there been any discussion around making these boolean conditions reusable, so we react to the same condition multiple times reusably using boolean logic, rather than math:
```postcss
label {
  --selected: false;
  &:has(:checked) { --selected: true; }
  grid-template-columns: auto if(var(--selected) ? 20px : 0);
  svg { opacity: if(var(--selected) ? 1 : 0); }
}
```
instead of having to use math switches like this:
```postcss
label {
  --selected: 0;
  &:has(:checked) { --selected: 1; }
  grid-template-columns: auto calc(var(--selected) * 20px);
  svg { opacity: var(--selected); }
}
```

This is a simpler example, and the math is actually better/easier in this case, though in many cases, boolean logic may be easier to digest and preferred by many devs.

---

Sidenote — per [my earlier comment](#issuecomment-2184136405) re a `matches()` selector, I opened #10593 and #10594. If they were to be accepted, the above example could be simplified even further to this:
```postcss
label {
  --selected: match(:has(:checked));
  grid-template-columns: auto if(var(--selected) ? 20px : 0);
  svg { opacity: if(var(--selected) ? 1 : 0); }
}
```

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


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

Received on Thursday, 18 July 2024 22:27:59 UTC