[hudixt]

A 4 year experienced react dev here. I have had decent time working with different styling

I'll try to answer few common things for everyone's context

Why even use CSS in JS?

- SPA bundling usually loads all CSS at once and all styles collide. You need to be super good at naming stuff/or load CSS based on module. So your CSS will be conflicting, so scoping is helpful here.

- Not having to jump from your component file to CSS file. Save some context switching or few strokes.

- Dynamic control over style. Basically your stylesheet is JS function returning style. You can do anything here. See this https://github.com/styled-components/styled-components/issue...

- Support for JS reference in color, font sizes, etc with editor support. It'll lead to more consistent design system.

- More cleaner API when using media queries, pseudo states. eg-https://emotion.sh/docs/media-queries

Another alternative is Emotion, also I find it to be much more cleaner in code perspective. (Good performant library in terms of layout and painting).

Why is export option not available for most CSS in JS (some suggested this as solution)?

Read this https://github.com/emotion-js/emotion/blob/bcf40cf2c20153481...

Is it worth it?

- Depends a lot on context and your perfonal objective. Generally I personally feel it's worth it as it's good tooling.

- CSS in JS is lot better than what it used to be. Styled component had good perf bump in last few years.

[stevebmark]

CSS modules solves all of these problems (except the separate file), and also lets you write vanilla CSS, and not have to hack around the limitations of css-in-js. Dynamic styles are easy with React's `css` prop, or simply passing in an additional class name.

[mikewhy]

React doesn't have a CSS prop.

[frank_nitti]

Must be referring to the style prop for jsx elements whose argument conforms to the React.CSSProperties interface

[mikewhy]

Hard to say, for instance the very popular styled-components package does add a `css` prop magically to all elements.

[girvo]

I think they've assumed `styled-components` is default?

[hudixt]

Added one more point on API. Also, you'll probably end up using one more library called classname for better classname management.

https://www.npmjs.com/package/classnames

In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than perf gains, which isn't that much on new systems.

[nicoburns]

Indeed. Worth noting that classnames is a tiny library.

[lhnz]

I've heard that `clsx` is faster: https://github.com/lukeed/clsx

[nicoburns]

Looks like a well designed library (and it is only 40 lines long - but then the original isn't much bigger). But it's hard for me to imagine code where this is a bottleneck.

[seumars]

It depends a lot on the context if that context is React. CSS in JS in retrospect looks like a shim for react developers who couldnt rewrite their code to single-file components like in Vue and later Svelte. You dont have to be a genius to know how to name and structure dom elements, though being good at it lets you reuse css and reduce overall app size better than any bundler ever will - but its just easier to install Tailwind.

[onion2k]

You need to be super good at naming stuff/or load CSS based on module.

You don't need to be that good, and there are methodologies that can help eg BEM.

[gentleman11]

Whenever you talk to somebody about how ridiculous it is to need a preprocessor to do basic sane things in css, you hear about how “css isn’t designed for that, it’s better this way. Use a preprocessor!”. Preprocessors are a workaround, not “the way it should be.” There’s no good reason why a @media query can’t take a variable for a min-size value, it just makes things error prone. Yet, the css spec is so proud of itself it has declared that there will never be a css 4