loading...

Discussion on: Classical CSS vs CSS in JavaScript

Collapse
tvanantwerp profile image
Tom VanAntwerp

I'm a convert to CSS-in-JS. The developer experience is really great. The cognitive overhead of keeping my component styles in separate files and switching between them was aggravating. It cost time and mental energy to keep track of everything. In the same way using a mouse is slow and distracting compared to keyboard shortcuts, CSS in separate files from JS components is slow and distracting compared to keeping it all together. It's still a separation of concerns, but the concern isn't style-vs-login; it's separation by component.

Collapse
comscience profile image
kapeel kokane

I had a doubt around nextjs style css in string literal. Is there any tooling suport for that? Like auto-complete, linter etc?

Collapse
shakib609 profile image
Shakib Hossain

If you use styled-component or emotion with Next.js then you can use the VSCode styled-component extension

Collapse
9zemian5 profile image
Oleksandr Demian

Vue.js and Svelte3 allows you to have scoped classical CSS inside of components.

Collapse
korbraan profile image
Cédric Rémond

In Angular too, and the absence of component scoped CSS in React is the only reason that would push me to use CSS-in-JS.

Thread Thread
9zemian5 profile image
Oleksandr Demian

Yeah, React is all about Javascript (JSX, CSS IN JS).

Thread Thread
korbraan profile image
Cédric Rémond

Not really, CSS in JS is a community addition to react. By default there is only raw unscoped CSS if I'm not missing anything.

Thread Thread
supportic profile image
Supportic

You can configure webpack to handle [.regex].css files as scoped.
In Create-React-App it's default if you name it .module.css that it's scoped.