Importing a stylesheet into a component vs SMACSS method

1948 views reactjs

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 styles directory.

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.

answered question

1 Answer


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

posted this

Have an answer?


Please login first before posting an answer.