DEV Community

loading...

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

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!