I have created a new React.js app using create-react-app.

For each component (e.g. src/components/ComponentX.js), I have created a separate stylesheet (src/styles/ComponentX.css), and imported it as follows import "../styles/ComponentX.css".

This has in turn resulted in a separate <style>...</style> section for each imported stylesheet on every page. Thus, the stylesheets are global (which makes sense for SPA?), albeit not concatenated as described here:

In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css file in the build output.

Since it doesn't seem to affect the functionality of the React.js app, where stylesheets are imported, where should I import my stylesheets? Local to the components or in src/index.js?

Bonus: What about components sharing the same stylesheet? Should both import it, if following the local approach?

CodePudding user response：

Generally I'd advise to import them locally, as this will enable you to later introduce per-page code-splitting if you wish to, whereas I don't see any advantage to importing them in your application root.

This approach should also make it easier to spot when you've forgotten to import one of your sheets and enables you to not always have to edit an extra file (your entry file) when adding a component.

However I'd also suggest you have a look at styled-components, a library for inlining your styles alongside your components.

CodePudding user response：

This is more architectural type of question. Importing CSS with your module is fine. There's whole debate between CSS-in-JS (what you're doing now) vs traditional CSS.

Thus, the stylesheets are global

CSS is global. If you want to scope your CSS either use some kind of technique like BEM or completely different technology CSS modules which will generate unique class names for your components.

It's also perfectly fine to have one central CSS file (like index.css or styles.css) where you import all other CSS files. Then you only import this central CSS file in one place and it will in turn import other stylesheets.

That is my preferred approach actually but it has some downsides - for example dynamically loading the stylesheet only when the component loads etc.

CodePudding user response：

If you have global styles that is going to apply on whole application. Put it in App.css or at global level. Else for each component make a folder like Homepage -> In that create Homepage.jsx and Homepage.styles.scss , It will be better. Else use styled-component no need to import

CodePudding user response：

My suggestions about the styles are the following:

1. Avoid to import CSS files at component-level, unless they are modules, see below
2. Use CSS modules at component-level and ensure that you are not changing some global style in these CSS files (like a or table styles, or even framework-related styles like, just to give you an example, .a-class-used-by-material-ui. Really, never do that at component-level!)
3. If you really need to change a framework-related style, and there is no built-in method to do that, only if you have no other way at all, create a styles directory and add a file like a-framework-name.css and add the overrides here, only if you are completely aware about the consequences (potential responsiveness loss, incongruity with other styles, opinionated changes and other)
4. Put a file in your styles directory, like index.css and import it in the root index.js file to reset some CSS default (to normalize)
5. If you decide to use CSS-in-JS, try to avoid mixing it with other techniques
6. Shared styles can be put in a module like styles/shared.module.scss (consider that, if you have a shared style and you start use the same style in a lot of components, it would be hard to predict the impact of a change made to the style. Let say you have the height set to 3rem then you decide to change it to be 3.5rem, you may broke something without realizing it)
7. Of course, import CSS modules in the proper way, something like import style from "style.module.css", this should avoid name name conflicts between style names since, if configured correctly, the name of a class like .fancyClassName will be transformed to style_fancyClassName__3xnbQ when generating the final code
8. If you want more control over CSS properties values (like "my accent color must be #AC0955"), you should consider CSS variables
9. Consider SCSS or similar solutions too, if you can take some advantage with them in your scenario

CodePudding user response：

This is the project structure i am working on

Each component has its own .css file. Style in this file is wrapped by a separate class corresponding to the component name. File index.jsx will import "./index.less" (normally index.css but my project uses lessjs). The project also has a central CSS file in common/style/index.less where commonly used classes are defined (like: .font-size-12, .font-size-14, .color-primary, ...)