DEV Community

Discussion on: Why I moved from Styled Components to (S)CSS modules

Collapse
lynnntropy profile image
Lynn Romich

Performance is definitely important, but I feel like you kind of threw the baby out with the bathwater here. As you pointed out at the end, we have CSS-in-JS solutions now that have zero runtime performance hit, so there's no need to ditch CSS-in-JS entirely if performance is your only real concern.

Collapse
puruvj profile image
PuruVJ Author

Yup. The thing is, I tried Linaria too. But my project heavily relies on path aliases, and whatever Vite's alias uses internally, wasn't compatible with Linaria, so the babel plugin threw an error and I couldn't debug the problem.

So I decided to just go ahead and merge the CSS modules PR into the code. I prefer Styled Components API, but CSS modules isn't bad either. The joy of writing plain CSS is also really nice and fast, and the intellisense is amazing, so not really missing out on anything for this project.

Collapse
lynnntropy profile image
Lynn Romich

Ah, that's unfortunate. But yeah, CSS modules are cool too, I mainly just don't like them in React because I don't want to go back to writing CSS in a separate file.

Collapse
alekseiberezkin profile image
Aleksei Berezkin

No-runtime CSS-in-JS seems like a good compromise! Are there any cons you aware of? What comes into my mind — they patch JS code which is fragile IMO.

Collapse
puruvj profile image
PuruVJ Author

I tried Linaria, but it didn't work with Vite with the aliases and all, so had to settle for CSS Modules. No regrets though, CSS modules are a great experience too :)