Re:Real-world CSS vs. CSS-in-JS performance comparison
by alexchamberlain on Tuesday June 08, 2021 @04:07PM
(#27440088)
Doesn't SCSS support CSS modules to prevent trampling on each others styles?
Re:Real-world CSS vs. CSS-in-JS performance comparison
by 11235813213455 on Tuesday June 08, 2021 @04:06PM
(#27440066)
like you say, the benefit is to easily attach styles to components (in the same programming language, compared to scss/css modules)
note: @emotion/styled is equivalent to styled-components, lighter and easier to set up for SSR (it works out of the box https://emotion.sh/docs/ssr#default-approach)
When using server-side rendered pages, there's no performance loss on the client-side, maybe a little more processing server-side, not sure if significant
In those scenarios, there are a few benefits: (a) no worries about accidentally trampling on someone else's styles, or styles from elsewhere overriding your styles; (b) build configuration is simpler; and (c) no worries about how CSS/SCSS is referenced/loaded - all references are handled in plain JS with no special loaders or anything.
I wouldn't use it everywhere (I've used other approaches that have worked just fine), but for some scenarios it makes sense.