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).
Solution 2 :
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.
Solution 3 :
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 ”
Solution 4 :
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.
Problem :
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.
Comments
Comment posted by goto
Loading
Comment posted by goto
“it has nothing to do with performance (although it certainly can have an impact on performance)” so can performance be impacted or not?
Comment posted by Jared Smith
@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.
Comment posted by Rohit Rawat
Thanks @JaredSmith . I didn’t consider the re-usability factor when I asked the question. Now it’s pretty clear.
Comment posted by Stigasaur
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.
Comment posted by Jared Smith
@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.
Comment posted by Jared Smith
It’s not just readability (although you’re certainly right about that, and the bundling). There’s also ease of reuse, see my answer.
Comment posted by Abdelmonaem Shahat
@JaredSmith totally agree with you I forgot that we can reuse the component every time as we need.
Comment posted by leosteffen
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.
