In my React app, instead of using styled-component or CSS-in-JS or importing a particular SCSS file into a component,
I used the SMACSS method where the only stylesheet that's being imported is the
index.scss, which imports all the SCSS
files inside the
Initially, I did the method of importing each SCSS file, but I changed my mind after realizing that my file structure was messy and switched to the less modern way.
I'm just wondering if there's a difference between importing each stylesheet and importing only one in terms of performance and speed of an app.
I don't think it will make much difference in performance but you would be better off building up the good structure of code which is always recommended. It's always good practice to create the single folder scss and then provide the references in main.scss of other files in folders like this way.
@import 'var'; @import 'mixins'; @import 'normalize'; @import 'default'; @import 'global/inputs'; @import 'global/btn'; @import 'components/modal-general'; @import 'components/modal-tabbed';
Then you can also use this single reference main.scss or index.scss in app.js or index.js