How to style React applications while the world burns around us (2020)

This article is an excellent summary of recent trends and philosophies of CSS. The only new, noteworthy styling solution missed (from what I can tell) is StyleX from Meta.<p>As someone working in this space, it&#x27;s a huge relief to move away from piles of CSS&#x2F;SCSS files towards colocating styles with markup.

Maybe I&#x27;m the minority here, but with something like Vite I can import a css file directly into a given component&#x27;s file and call it a day. Haven&#x27;t worried about scoping in forever, and only need to manage a number of distinct, small, and comprehensible css files.

When talking about CSS-in-JS I am reminded of the short lived escapade at Netscape around 1997&#x2F;1998 when they launched JSSS, only be be shut out by Microsoft ignoring support for it in the increasingly dominant Internet Explorer as they favored CSS. As a result it died and disappeared.<p><a href="http:&#x2F;&#x2F;sunsite.uakom.sk&#x2F;sunworldonline&#x2F;swol-04-1997&#x2F;swol-04-webmaster.html" rel="nofollow">http:&#x2F;&#x2F;sunsite.uakom.sk&#x2F;sunworldonline&#x2F;swol-04-1997&#x2F;swol-04-...</a>

Deserves a (2020) tag I think, given the regular references to &quot;current times&quot;, plus the rate of change in the CSS&#x2F;JS space

&gt; There should be a German noun for the fear of breaking something in a CSS codebase.<p>Webseitenstilzerschütterungsangst?

&gt; Ant Design is a product of Ant Financial, which I gather is the PayPal of the Alibaba universe. It’s very widely used in China.<p>This feels a bit dismissive. Alipay is the largest payment platform in the world.

I&#x27;m a long time material ui user and always disliked the tailwind approach of slapping classnames in a long string.<p>After reading the excellent article it hit me, I&#x27;m already doing the exact same :facepalm:<p>&lt;Box mr=&quot;4&quot; border=&quot;1px solid #ee&quot;... &#x2F;&gt;<p>There is really no difference, instead of a string with classes I have a bunch of props. Time to look at tailwind again...

TL;DR the author settled on Tailwind. I prefer Tachyons myself (less overhead). I agree that functional&#x2F;atomic CSS is the way to go.<p>Separation Of Concerns (HTML &lt;-&gt; CSS) is a LIE. Naming is one of the hardest things in computer science, and folks in the &quot;Separation Of Concerns&quot; camp repeatedly subject themselves to this torture by forcing themselves to come up with &quot;semantic&quot; names instead of just writing the damn styles and seeing which styles get repeatedly used together so that they can be condensed into a class.