10

I am new to Web Development and currently learning React.js. I learned about how to create Components in React and giving styles to them.

Is it like that if I create separate CSS files for React Components, the app will load faster because the browser has to load small sized CSS files instead of single big file?

I want to ask about how React loads the CSS files in the browser and whether I should use separate CSS files for React Components.

Improve this question
1
  • 7
    Loading CSS files will be the bundlers responsibility, not React's. Having separate CSS files could actually be beneficial if your bundler does code splitting because you may not want to load all your CSS at once but rather in smaller chunks as needed. Using separate CSS files with something like CSS Modules is the best approach here since you're creating components and want things to be encapsulated rather than affecting things elsewhere/globally. Commented Feb 29, 2020 at 12:01

4 Answers 4

Reset to default
15

Yes, you want separate files. No, the reason why you do it isn't for performance (although it certainly can have an impact on performance).

You're missing that components should be re-usable.

If I create an AwesomeWidget component and I want to drop it straight into another project I'm working on then I should be able to do that with as little friction as possible. And you can't do that if its styles are mixed in with application-specific stuff. Your components should be, insofar as is possible, independent of what's around them.

Keep the component-specific files separate and let Webpack do the work of wiring it all up for you. If you find yourself reusing a component enough then move it into its own repo (don't forget you can npm install from a git url if you don't want to publish it to the public package registry).

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

"it has nothing to do with performance (although it certainly can have an impact on performance)" so can performance be impacted or not?
@goto1 performance can be impacted but there's a lot of "it depends" going on there. Are you bundling? How? HTTP 1 or 2? Caching/CDN? There isn't a simple universal answer to the performance question, but the reuse/flexibility argument applies always. In other words, while having the separate CSS files can impact performance, that's not the reason you should do it. I edited to hopeful clarify what I meant.
Thanks @JaredSmith . I didn't consider the re-usability factor when I asked the question. Now it's pretty clear.
To make it more reusable wouldn't it make more sense to keep styles in the same file? Let's take your scenario for example. AwesomeWidget.ts has just the component logic and imports styles from './styles'. If you just copy AwesomeWidget.ts and drop it in a new project, it will still be trying to import styles from './styles'. So it isn't reusable out of box, now you need to wire the styles too. Whereas if it was all in the same file you could just copy/paste that one file.
@Stigasaur your component's styles should be bundled with its templates and scripts in its own folder so that relative import shouldn't ever fail. Most component libraries also encourage/require a naming convention to make the relationship even more explicit. Once it's debugged and being used in a working project it ideally should be a package you install with npm (either from the public registry, a private registry, or even a git url), not something where you manually manage files on the file system.
1

yes, it is preferred to make every component with its stylesheet and also use CSS modules file to make it scoped. also separating your CSS file is for readability only and for you as a developer it has nothing to do with loading faster because your bundler will compress all CSS files into a single one to make it loaded faster. I hope My answer is clear and enough for your question.

Improve this answer

3 Comments

It's not just readability (although you're certainly right about that, and the bundling). There's also ease of reuse, see my answer.
@JaredSmith totally agree with you I forgot that we can reuse the component every time as we need.
As a dev, readability is one of the most deterministic attributes that impact my productivity. Components with huge stylesheets just make me sick. Strictly personal preference, though.
1

In your project folder you will see index.css or app.css, write your style there . Example

.divcontainer{ }

So in your class now whenever you want to use the css style Use class=“divcontainer” in the tag not className=“divcontainer ”

Improve this answer

Comments

0

You can import the CSS directly into the component.

Example: import './style.css'

Or you can use the styled-component library to work with CSS I recommend it.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.