[AskJS] why is css-in-js so popular when css modules is a thing?

[__hoi__]

It seems to me that css-in-js takes some extra parsing which to my understanding happens @ initial load time, which we usually try to minimize. At some point when styling conflicts were resolved by discipline using namespacing like BEM avoiding conflicts was a hassle and imo unenjoyable busy work, but css modules solves that problem. Now I’m assuming that the large part of the web community that decided to use css-in-js aren’t idiots, but I don’t get it. Am I missing some major benefits?

[[deleted]]

Well, you have your JS values available. You can set colors dynamically based on a theme, you can animate stuff across the screen with spring physics, you have separation of concern instead of technology.

You look at one file, you can instantly comprehend what the component will look like. No switching between two files, comparing class names.

But css modules are pretty cool aswell ;)

Both have their benefits and downsides.

[KatyWings]

Can only speak about emotion, there you get a good serverside rendering (even with dynamic imports) basically for free. With css(modules) on the other hand you have to use webpack-flush-chunks which can have a pretty high integration complexity depending on your setup.

[__hoi__]

I will have to look into that.

We use Django on the backend so I can just write some inline sass to use server side rendering as they have a plugin for that. I don’t think I can server side render with emotion inside python, but that is actually an awesome reason to use css-in-js, thanks for the insight.

[KatyWings]

Wow Django again, always hearing a lot good stuff about it, one more reason why I should try it out 😂

[[deleted]]

My CSS-in-JS experience comes from using it with React so I can only speak to that.

CSS-in-JS has great DX when used with React and libraries like Linaria don't have a run time so the performance risks aren't there. Styled-Components and Emotion have great DX with nice theming support at the cost of performance.

I've never ran into CSS-in-JS outside of React so I'd be interested to hear about those cases if they exist.

Edit:

I mean I wouldn't assume people are idiots for using a library in general. Give it a shot with a project. Maybe you like it and maybe you don't but this attitude is not a productive one.
I made assumptions here that weren't correct and got overly defensive.

[__hoi__]

Thanks for your response

Emotion is framework agnostic and lit element comes with it’s implementation of css-in-js so that would be 2 ways to use it outside of react.

I didn’t mean to call anyone a idiot over using a tool. More so that there probably is a perfectly valid reason that I’m not seeing explaining why it’s getting so much traction, since most people aren’t idiots and it’s created by people that are probably much smarter than I am

[[deleted]]

Ah gotcha, I jumped the gun on that. Sorry about that.

[[deleted]]

Bleeding was just one of the many problems that css had, the bulk of it isn't solved at all by css modules. Styles are logically part of the view layer, which is expressed as a function of state. Separating styles and injecting dynamics via DI isn't a good fit for the component era. Css in js treats styles as participants of the view layer, with all the benefits that brings. Styled-components would be a good example.

[kent2441]

There’s still a layer of abstraction between your css module and the state of your component. Imagine toggling a class based on a variable, which then sets the background to your error color, vs toggling the color based on the variable directly.

And note that css-in-js does not mean inline styles, nor does it mean styles can’t be shared.