This has been a contentious debate with a windy path and lots of detours. What are the most important elements of this discussion and where do we stand now?
For further actions, you may consider blocking this person and/or reporting abuse
This has been a contentious debate with a windy path and lots of detours. What are the most important elements of this discussion and where do we stand now?
For further actions, you may consider blocking this person and/or reporting abuse
Oldest comments (34)
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.
I β€οΈ CSS-in-JS because it's so easy to use (although I may be biased because I'm very used to it at this point). I use it in all my side projects if I can.
It's not perfect though, and it can cause performance problems depending on what you're trying to render. There are some people at Atlassian who are trying to solve some of these performance issues with compiled-css-in-js so it will be interesting to see where that goes.
My thoughts are anything that gets us away from a DSL, is the right direction.
Case in point, ever try to refactor and clean up a large project's Css across 20 or more files each with hundreds of lines?
Painless Maintenance: Never go on a hunt for CSS affecting your components ever again.
Classic css feels like cubersome for me. But it does give me benefit of using css classes anywhere. I'm not into CSS-IN-JS but I just hope that CSS can be as strongly typed stylesheet as Any other languages it would be.
OFF-TOPIC: Still waiting for FLUTTER VS REACT NATIVE Post. That's the most talkative Mobile framework on the web. Well of course, my profile pic says it all.
Classical! I think CSS is poorly misunderstand and slighted - when understood and well applied CSS can be a powerful tool or a frustrating after thought.
This is probably the best CSS description I've read. ππΌ
CSS scoped is a nice shortcut to reducing complications, and it is still CSS in HTML.
In the end, I still prefer CSS in HTML for SEO purposes, perhaps still with Webpack and
mini-css-extract-plugin.Classical CSS. I tried CSS in JavaScript and I didn't like it. I am so use to connecting the HTML, CSS and JS separately.
It's gotta be a split. The entire theme can't be done inside JS components. I love something like Tailwinds in the template and then CSS in js for the components. It's the best way I know to stop a stylesheets' persistent growth.
My friend suggested we could use something like bonsaicss.com/ so that we can add utility-based styling right inside the React component code, instead of just external CSS or JS object-based styling. I think it makes sense in some cases.
I find scoped css awesome for making webapps ( like css modules or svelte's approach)
But currently we are making shopify apps which require heavy customization, so we find css in js, better for these kinds of projects.