Is CSS in JS the only way to go?
stereobooster opened this issue · 4 comments
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:
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.
Found some time today - let me know what you think https://github.com/timarney/react-faq/blob/master/README.md#css-and-react
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.
Closing this issue - at least for now. Using a diagram like that would be nice ... can revisit this moving forward.