Hacker News new | ask | show | jobs
by MH15 870 days ago
React has so many solutions for this- I wonder, is there anything that works similarly to Vue scoped styles? I always struggled with styling React but it's like a completely solved problem in Vue imo. You're welcome to use Tailwind of course but the scoped styles per-component work so well I rarely find myself missing it.

Then again I'm one of those few engineers who actually enjoys CSS so my opinion may not be representative.

3 comments

React is a small general-purpose reactive rendering library. Everything else is outside of its scope, including anything pertaining to DOM, CSS, and so on.

If you want something less flexible, more opinionated, restricted to rendering in DOM but with more respective batteries included (such as styling, etc.), you should look at a framework instead. Some popular examples are Gatsby, Next, Docusaurus, etc. (Non-React alternatives in the same category include Vue and Svelte.)

those are called css modules - nextjs has built in support https://nextjs.org/docs/app/building-your-application/stylin...
Css modules would be great, except there’s bad tooling in VSCode. Autocomplete through Typescript is the killer feature of Panda / Vanilla extract, not that you can style.
So does Vite fwiw.

And it's not hard to get them working in Webpack...if you're like me.. maintaining the same app for 10 years and see no reason to switch to the new hotness.

I’ve had the same experience with svelte - where excellent css support is built into the framework itself.

Why does react makes this the developer’s problem to figure out? It feels a bit like a missed opportunity.

Historical reasons.

For a long time React was advertised and regarded as "just a UI library", so not having anything bundled with it was a conscious design decision.

End result is that you have an average of three popular solutions for stuff that's normally already included in other frameworks and no two React projects are the same.