Is CSS in JS the only way to go?

[stereobooster]

I have no final opinion on this question. Will just list my thoughts on subject.

In section "What about styling things in React?" default option is CSS in JS. I see where it goes it is hype technology. But there are definitely downsides.

Overhead:

• memory: css in js will leave in JS memory
• parser: JS parser have enough to parse already with 100kb JS pages. It will parse JS and then render CSS (or set Inline styles of element?).

Dan Abramov recommends styled-components for CSS in JS. He also says that plain old CSS is good option too. styled-components supports theming and maybe will support Server Side Rendering.

Good articles on other than CSS in JS options:

• http://andrewhfarmer.com/how-to-style-react/
• http://andrewhfarmer.com/css-modules-by-example/

[timarney]

This section needs to be reworked.

Your correct it should point to the basics first plain CSS and go from there.

I've pretty much settled on styled-components myself.

Again I'll tackle this next week. Thanks for pointing out the 'hype by default' defiantly want to point out more options.

[timarney]

Found some time today - let me know what you think https://github.com/timarney/react-faq/blob/master/README.md#css-and-react

[stereobooster]

it is definitely improvement. I also like decision diagram from one post

But this diagram also need emphasize, that styled-components does not support SSR and CSSModules doesn't work good for theming.

I'm imagine series of decision diagrams (SVG which can have html links inside).

Do you want zero-config? Choose: CRA or Next.js. Do you want SSR? Then Next.js will not work for you just yet - link to pending issue. Styled components will not work for you too. And blueprint.js.

Diagrams can look something like this. My imagination gone wild.

[timarney]

Closing this issue - at least for now. Using a diagram like that would be nice ... can revisit this moving forward.