Neat. But side note: do we really need if() in CSS? Like, the complexity that adds is going to be worth the functionality it brings? It's introducing a whole new paradigm to solve what real problem?
Neat. But side note: do we really need if() in CSS? Like, the complexity that adds is going to be worth the functionality it brings? It's introducing a whole new paradigm to solve what real problem?
We already have specialized conditionals in CSS, such as @supports, minmax, media queries, etc.
if() is just a general purpose conditional.
Using if() is going to reduce complexity for a whole range of use cases. Right now, developers are using custom property hacks to simulate true conditionals [1].
[1]: "The --var: ; hack to toggle multiple values with one custom property"—https://lea.verou.me/blog/2020/10/the-var-space-hack-to-togg...
See the MDN examples:
https://developer.mozilla.org/en-US/docs/Web/CSS/if
I for one would much rather use local conditionals than do the logical equivalent through conditionally set CSS variables. It is much more readable and extendable than several layers of abstraction (design token vars -> semantic vars -> theme vars potentially complexed by media/container queries -> element styles).
Of course I wouldn’t replace all of that, but if() would certainly make many things easier to grok for the next guy. Just don’t overuse it.
JS is inherently single-threaded and mobile cores aren't really getting faster, but we are getting more of them. Allowing you to express more in CSS means you get faster-loading, more highly-performant, less energy-draining web UIs.