DEV Community

Rethinking CSS in JS

MS_Y on September 12, 2024

0. Introduction In the world of web development, CSS is a key element in making user interfaces beautiful and functional. However, as t...
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

We can do CSS isolation at the component level without JavaScript! Naming conventins like BEM allow you to use both global styles (where it makes sense) and isolated component styles within the same design system. Functional/utility CSS (like Bootstrap or tailwind) might be another useful strategy, although I personally don't like that it throws away so many of CSS's possibilities and advantages (much like most CSS-in-JS projects do).

Colocating files is also possible without CSS-in-JS, all you need is @import and an optional bundler putting the small pieces together.

Last but not least, to modify CSS variables from JS, CSS custom properties are now widely supported in modern browsers.

So we don't "rethink CSS in JS", and we don't need to.

Adding to the disadvantages like increased complexity and browser performance, CSS-in-JS makes it much harder to for stylelint and IDE inspections to detect CSS issues and give helfpul advice.

Your post is probably the longest that I ever saw on DEV, and despite being opinionated towards JavaScript, it contains many important concepts and libraries beyond advocating a single solution. Thanks for taking the time to put it all together!

Collapse
 
black7375 profile image
MS_Y

BEM is definitely a great strategy. I think Variants help make BEM writing very easy.
I want to keep the cost of creating and maintaining a design system as low as possible. Without sacrificing DX.
Of course, this requires a lot of investment in tooling, and I understand that the future is uncertain.

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

Maybe the same with fractal: useful once you have set up the build tools and agreed on a common project structure.

Collapse
 
florianrappl profile image
Florian Rappl

Great write-up!

Note that the con on "CSS-in-JS" is still "performance", while you also use Vanilla Extract (which has zero runtime cost - so its still pre-processed and not affecting performance; so potentially add "most CSS-in-JS solutions might introduce a runtime performance penalty". Otherwise I really enjoyed this one - well done!

Collapse
 
black7375 profile image
MS_Y

You're right. Emotion and StyledComponent, JSS which are still popular, have runtimes.

I just wanted to focus on the trend of (near)Zero runtime CSS in JS solutions emerging, such as PandaCSS, PigmentCSS, and StyleX, in addition to Linaria and Vanilla Extract.
I'll update to make it clearer that performance is still an issue for most solutions.

Collapse
 
morphzg profile image
MorphZG

I see you put huge effort i to this. Thank you for sharing. We need more people like you. When i see posts on the opposite side with minimum effort having good reach while posts like yours are waiting to be seen.... Its a shame. Seems like people have less and less attention and cannot read more than 3 minutes.

I am commenting before i even read it. Thank you.

Collapse
 
florianrappl profile image
Florian Rappl

Exactly this. I'm glad I'm not the only one enjoying long thoughtful articles instead of AI generated listicles and posts that are meme collections.

Collapse
 
daniepetrov profile image
Daniil Petrov • Edited

Thanks for so thoroughly explored and presented research of modern CSS problems. Truly a gem article 👍

Sometimes I hear from developers “you should simply use CSS, don’t over-engineer it” or “Tailwind is the defacto standard today, it solves all problems”. No, it’s not that simple. CSS is hard, we’ve explored a lot, but there is more to explore further and this article proves that statement.

I will be sending a link to this article to every developer who says the above things

Collapse
 
martinbaun profile image
Martin Baun

Great piece man. I completely switched to radix and headless ui and tailwind css... It made my projects so much easier to maintain, it was a nobrainer for me and my needs.

Collapse
 
black7375 profile image
MS_Y

Headless components or Hooks make them truly reusable.

tailwind was fantastic for prototyping.
I think management will definitely be easier if we have a proper theme system and variants.

Collapse
 
rust_will_eat_the_world profile image
Nathan Stevens

This is good stuff! Thanks!
My first comment here! :D

Collapse
 
moopet profile image
Ben Sinclair

Global namespace:
The solution, "add a lot of class names" defeats the point of CSS and adds more points of failure.

Implicit dependecies:
The fact that these exist is a flag that things are coupled which do not need to be coupled.

Minification:
The solutions to pruning CSS are almost all awful, and result is weird edge-cases. The solution, "use less CSS" should work for most things.

Breaking isolation:
Isolation for styling hurts end users.

Collapse
 
thermal8 profile image
Thermal8

Rethinking CSS-in-JS often revolves around balancing performance with maintainability. While CSS-in-JS can enhance modularity and dynamic styling, it can also introduce overhead. To mitigate performance issues, consider techniques like optimizing rendering and avoiding excessive re-renders. Using efficient libraries and practices ensures that the benefits of CSS-in-JS outweigh its drawbacks. For more insights on implementing these techniques effectively.

Collapse
 
wanda_vision profile image
jayik95342@sigmazon.com

Hmmm What's nicely Explained

Collapse
 
deyrupak profile image
Rupak Dey

Amazing!
Moderated as high quality. Hoping it will reach more people now.

Collapse
 
mflorence99 profile image
Mark Florence

This is a very thoughtful and informative article. However, as a concept, CSS-in-JS is such an awful idea, it borders on parody.

Collapse
 
neurabot profile image
Neurabot

I particularly like your post. I look for creating good webdesigns with figma. I'm a beginner with. Any tips about guidelines ?

Collapse
 
manutopik profile image
Emmanuel Salomon

I use unocss and I stopped over thinking about css...