0. Introduction
In the world of web development, CSS is a key element in making user interfaces beautiful and functional.
However, as t...
For further actions, you may consider blocking this person and/or reporting abuse
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
@importand 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!
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.
Maybe the same with fractal: useful once you have set up the build tools and agreed on a common project structure.
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!
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.
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.
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.
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
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.
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.
This is good stuff! Thanks!
My first comment here! :D
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.
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.
Hmmm What's nicely Explained
Amazing!
Moderated as high quality. Hoping it will reach more people now.
This is a very thoughtful and informative article. However, as a concept, CSS-in-JS is such an awful idea, it borders on parody.
I particularly like your post. I look for creating good webdesigns with figma. I'm a beginner with. Any tips about guidelines ?
I use unocss and I stopped over thinking about css...