2 ms·

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

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?

cluckindan 1y ago
See the MDN examples: https://developer.mozilla.org/en-US/docs/Web/CSS/if 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.
- potato-peeler 1y ago
  What in gods abomination is this - 3px yellow if( style(--color: green): dashed; style(--color: yellow): inset; else: solid; ) —- CSS was suppose to be only for styles, single responsibility and all. What is the need to introduce logic in cascading style sheets. Isn’t js enough?
  - cluckindan 1y ago
    Different responsibilities. if() seems great for multisite/multitheme enterprise applications.
alwillis 1y ago
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-toggle-multiple-values-with-one-custom-property/ https://lea.verou.me/blog/2020/10/the-var-space-hack-to-togg...
masterj 1y ago
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.

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?

cluckindan 1y ago

See the MDN examples: https://developer.mozilla.org/en-US/docs/Web/CSS/if 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.

potato-peeler 1y ago
What in gods abomination is this - 3px yellow if( style(--color: green): dashed; style(--color: yellow): inset; else: solid; ) —- CSS was suppose to be only for styles, single responsibility and all. What is the need to introduce logic in cascading style sheets. Isn’t js enough?
- cluckindan 1y ago
  Different responsibilities. if() seems great for multisite/multitheme enterprise applications.

alwillis 1y ago

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-toggle-multiple-values-with-one-custom-property/ https://lea.verou.me/blog/2020/10/the-var-space-hack-to-togg...

masterj 1y ago

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.