[shureluck]

I have been doing frontend dev for nearly 20 years and CSS in JS has always struck me as completely unnecessary. I have yet to see a need for any of it that doesn't introduce more problems than it solves. Do you have any examples of cases where it is needed? Im using SCSS with SSR super well. I dont get why JSS in CSS is seen as superior?

[iaml]

Styled components are basically html element + dynamically generated class, you get scoping for free (you'd have to use css-modules for that otherwise), and you can define custom props and dynamically modify that component's style. This is extremely useful because one pattern I use frequently is element that has a lot of different modifiers like isSelected or isDeleted, in css you need to define classes for each, but here you just don't return some styles if the prop is not set. You also get full typechecking with typescript for all components, their props and theme. You also get autoprefixer out-of-the-box, and as a bonus if you ever wanted to lazy-load parts of your app, the styles for it should tree-shake correctly without any modifications, unlike traditional css.

[eyelidlessness]

For my usage (which I use Linaria, a zero runtime variant that resolves to link tags on build), there are two main benefits:

1. All of a given component’s dependencies and implementation can be viewed/resolved/navigated together.

2. Point 1 also aids static analysis, allowing easier type checking & linting, refactoring, dead code elimination etc.