What is the benefit of using styled components over css modules in Reactjs [closed]

Question

I've researching about what's the best way to style your page in React application. I see a lot of libraries to style in react like Styled Components, Glamor, CSS Modules.

In my current project, I am using CSS Modules(mainly to get rid of css conflicts and page specific CSS). I googled a lot about why should I use styled components and CSS-in-JS but I couldn't get any concrete answer. So my question is that if there is actual performance benefit of using CSS-in-JS or styled components or it's just syntactic sugar.

Answer 1

I have experience with both technologies, have used Radium (another CSS in JS library) and am currently using CSS modules in my projects. Styled components are definitely much better than Radium because they let you style :hover states, etc. But in my opinion, CSS modules are still the best bet, especially if you see that your project is going to grow bigger than 10-50 components. Code sharing across CSS in JS libraries is a nightmare. On the other hand, CSS modules let you compose other classes, import variables from other CSS files and even JS can import variables from CSS.

Answer 2

One of the reasons I love styled components more than any other way of writing css in a React based ecosystem is that it enforces the best practices. As somebody wrote up there that code sharing while using styled components is a nightmare and I can't agree more and thats where the enforcement part comes in. If you are not writing really modular components which is how a React component hierarchy should be designed (atomic components composed to build a function rich modules ), you surely are going to rewrite similar styles a lot of times. But if you can break and compose your components in a really bottom-up fashion using styled components (or even inline styles if you may prefer so), code-sharing is not a problem anymore. Further code sharing shouldn't be a an issue discussed at styling level, sharing encapsulations should rather be a component level stuff in most of the cases. CSS modules is in my opinion a mere className scope limiting tool while styled components provide a more declarative approach to styling in React based projects.

Coming on to one of the cons that I have not been able to wrap my head around is the kind of nested component structure Styled components lead to. I have tried to remain more semantically aware while naming my style components but I am sure there might be other technique to do something about it. I don't find it much of a problem myself and hence haven't put much of an effort towards it.

Styled components would probably be a bit less performant that css modules because there certainly are overheads involved in creating components for styling and rendering them but that would be a miniscule difference.