Atomic CSS is a great idea. You can keep CSS size growth sub-linear in large applications with a lot of components.
Co-locating styles with React components is a great idea too. You can keep the styles you need right next to the component.
Many folks implement these ideas with Tailwind.
It’s fine if you like Tailwind. But Tailwind is not CSS — it’s a DSL of class names to apply styles. You need to learn Tailwind. Your designers need to learn it. Keeping your Tailwind DSL synced up with tools like Figma which exports CSS introduces friction and conversion.
And you’re going to need a larger monitor. Courtesy of @RhysSullivan, here’s a single div styled with Tailwind in IMAX 70mm:
Image credit: @RhysSullivan
Via X
A Better Way
Meta built StyleX to solve these problems. Yahoo Mail built a very similar system internally over 6 years ago where you write CSS as JavaScript objects co-located with your React components. Your CSS looks like CSS.
The final result is very small. You can load the entire CSS for the entire app all at once and avoid style repaints.
Yahoo Mail’s entire CSS was under 45 KB gzipped and it’s a huge application. It was so small we simply inlined it into the SSR HTML.
I hesitate to recommend StyleX for all projects. The ergonomics and open-source build tooling need refinement. Surely Meta has internal tools they use for building StyleX which are better than the open-source tools.
But the idea of StyleX is fantastic. I believe the public open-source implementation will get there eventually. The ideas are too good.
Leave a Reply