DEV Community 👩‍💻👨‍💻

Saugat Rai
Saugat Rai

Posted on

How do you manage your sass/scss or any other styling files on react?

How do you structure your styling files on react? Do you use styled-components or do you use sass/scss?

Top comments (6)

Collapse
 
panczarny profile image
Michał Czarnota

Me and my team use css modules (without .module extension) and sass with scss notation. Each .scss file is in the same dir in whic .jsx file is. We have structure like src/components/Avatar/Avatar.scss and import it as module in .jsx file.
Also, there are some files in src/styles dir, that contain some global variables.

I tried some ways of styling in JS apps and I found this way the simplest, cleanest and fastest 🏇

Collapse
 
raisaugat profile image
Saugat Rai Author

Cool. I think this approach is much cleaner than styled components. But have you tried styled components? And what are your thoughts on this?

Collapse
 
panczarny profile image
Michał Czarnota

Soon after your comment we decided to use styled-components in part of our system. It's been a while with them, so I've got some thoughts.

  1. It's so easy to style components, depending on props!
  2. It's so hard to debug nested components!
Collapse
 
gmantovani97 profile image
gmantovani97 • Edited on

How did you configured it to not use the .module extension? Probably you did it inside webpack, but could you share the code?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

We keep our components in folders, with their own Sass style file in there with them. And then additionally global Sass and variables files at the top level. I quite like this structure as it keeps component styles separate but doesn't pollute the JS with styling code.

I've noticed more people seem to be moving towards declaring their component styles in the JS though and would be keen to know why!

Collapse
 
raisaugat profile image
Saugat Rai Author

I also like the idea of placing the Sass file in the same component where it is use.
Using styled component is quite useful, but I think it makes the jS file very long.
Anyways, thanks for you opinion. :)

🌚 Life is too short to browse without dark mode