[iaml]

Your opinion that CSS-in-JS is bad is just your opinion. Styled-components can do everything sass/less/postcss can and more, you don't need random binaries installed globally to transpile it to css when building, you get theming for free, it is easier to understand because you can ditch the arbitrary mappings of state variables to css classes, and even get types, it works with SSR and promotes one-file-components which is heavily used in Vue. Oh, you can even extend css syntax to fix small annoyances or add features.

[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.

[cutler]

Thanks but I'll stick with my global styles.css in the root directory.

[zoover2020]

To each there own I guess. I've been using twin for a few projects this year and absolutely love it.

Overall I think opinions on HN are quite progressive, the only area where I've seen this being different so far is CSS-in-JS frameworks.

I think a lot of people already have an opinion without trying it, oh well.

[cutler]

I tried it via Material UI with a React app and everything ground to a halt. What a mess it was.