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.
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.
I had a doubt around nextjs style css in string literal. Is there any tooling suport for that? Like auto-complete, linter etc?
If you use
styled-componentoremotionwith Next.js then you can use the VSCode styled-component extensionVue.js and Svelte3 allows you to have scoped classical CSS inside of components.
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.
Yeah, React is all about Javascript (JSX, CSS IN JS).
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.
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.