15 ms·

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

by MH15 3y 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.

STRiDEX 3y ago
those are called css modules - nextjs has built in support https://nextjs.org/docs/app/building-your-application/styling/css-modules https://nextjs.org/docs/app/building-your-application/stylin...
- erhaetherth 3y ago
  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.
- ahzhou 3y ago
  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.
josephg 3y ago
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.
- Tade0 3y ago
  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.
strogonoff 3y ago
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.)

by MH15 3y ago

STRiDEX 3y ago

those are called css modules - nextjs has built in support https://nextjs.org/docs/app/building-your-application/styling/css-modules https://nextjs.org/docs/app/building-your-application/stylin...

erhaetherth 3y ago
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.
ahzhou 3y ago
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.

josephg 3y ago

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.

Tade0 3y ago
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.

strogonoff 3y ago

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.)