Ingo Steinke is a Berlin-based senior web developer focusing on front-end web development to create and improve websites and make the web more accessible, sustainable, and user-friendly.
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.
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.
Ingo Steinke is a Berlin-based senior web developer focusing on front-end web development to create and improve websites and make the web more accessible, sustainable, and user-friendly.
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.