This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.

That's why the wink ;)

I used to sort of like CSS-in-JS, but on larger projects it also quickly devolves into "I know we have a design system, no idea what we have there, here are one-off CSS styles for this particular component"

Everything is with its trade-offs alas sigh

I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful.

What are the benefits you're getting from CSS-in-JS?

I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read.

Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all.

[0] https://mantine.dev

[1] https://emotion.sh/docs/introduction

[2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...

Vanilla-Extract is CSS-in-TS that compiles to raw CSS.

https://vanilla-extract.style

Use CSS modules then. The largest CSS file in the largest application I'm working on is around 200 lines (I prefer splitting everything into small components — easier to test, easier to reuse).