4 ms·
React doesn’t have an opinion about CSS so there isn’t a “React” way. The same goes for most things in React; it’s quite lightweight and leaves a lot of decisio
by shortcake27 4y ago
React doesn’t have an opinion about CSS so there isn’t a “React” way. The same goes for most things in React; it’s quite lightweight and leaves a lot of decisions up to the developer. This might be jarring to people who come from frameworks that have everything built in.
For CSS, You can use plain old CSS, CSS modules, or one of the many CSS-in-JS libraries. The tech you choose will determine where your CSS goes. For plain CSS, I probably wouldn’t have individual CSS files for each component due to the risk of naming collision. For CSS modules, generally I’ll have one CSS file per component in the same directory as the component. Same goes for vanilla-extract. For styled components or Emotion, CSS is generally defined in the same file as the component.
It’s worth having a play with a bunch of different styling solutions to see which one you like best. I prefer CSS Modules but it requires some setup in your build. Emotion has a quick setup and has a few different ways of applying styles (styled api, css prop etc), so it’s an easy way to get styling going in simple React projects.
https://emotion.sh/docs/introduction#react https://emotion.sh/docs/introduction#react