Discussion on: Classical CSS vs CSS in JavaScript

gpmcadam profile image
Gary McAdam

The arguments for separating CSS from JS are, in my experience, misguided.

You will hear that putting your styles in a style sheet is "separation of concerns". But I don't think that's quite right.

If your styles are concerned with your UI code, then they belong together.

However, you can achieve this in many ways. With styled-components, or with CSS classNames and having many individual stylesheets for each component of your code.

I find that styled-components offer the best mix of both re-usability (via composition) and clarity. I love that I do not have to go searching for where my styles are defined and worrying about how they are somehow inherited from other places. The structure is clearer.

But, as with all things, the caveat is: do what feels natural to you, what solves your problem, and what makes the most sense given your technical stack and direction.