A few days ago, Kevin Powell released a video showing how you can use functions and if statements in CSS
While I think he did a good job explaining everything, all I could do is think this adds more unnecessary complexity to CSS. In all of the examples he showed, the original CSS variables solution worked perfectly fine and was more natural in CSS. The refactored version just seems unnatural to me. And honestly, I am not really sure this is solving a huge pain point in CSS.
Maybe there are some valid use cases for these experimental features, but right now I am not really seeing it
Max width works fine for me and I’ve been able to resize my stuff accordingly to different screen sizes just fine the old fashion way. I like how naturally simple CSS is and CSS reminds me of those fridges from the 50s that work forever.
Having the media query inside the repeat function, awesome. Definitely agree it is less readable, as you now need to read the function to see what it does.
Another thing I fear is how LLMs are going to use these new features.
I can see folks like Kevin Powell, who have years of experience, thinking through use cases on where this would be appropriate to use.
I can’t say the same thing for LLMs though. And a good portion of new code is AI generated.
LLMs already do some weird things when it comes to CSS. It still manages to “work” but there are definitely some weird choices being made there.
Right now these features are still marked as experimental and not supported in all browsers. But I fear how codebases will look once these features are better supported.
Interesting point! CSS has always been declarative and
that is what makes it approachable. Adding functions
and if statements feels like borrowing JavaScript logic
into a language that was never meant to think that way.
CSS variables already solve most of these problems
cleanly. The refactored versions Kevin showed did not
feel more readable to me, they felt more complex for
the same result.
That said I am keeping an open mind. Maybe in large
design systems with heavy component logic this would
reduce JavaScript dependency significantly.
One thing this made me think about is how the best
web tools are going the opposite direction, removing
complexity instead of adding it. When you can preview text animations directly in your browser
with zero setup at paperanimators it shows that
sometimes stripping away logic is more powerful than
adding more of it.
Curious if anyone has a concrete use case where CSS
if statements would genuinely replace JavaScript logic
in a meaningful way?
If the viewport size or screen orientation changes, JavaScript may not detect the change. CSS would handle this change automatically according to the stylesheet.
