Discussion on: Classical CSS vs CSS in JavaScript

franky47 profile image
François Best

I have tried many ways of doing CSS-in-JS, here is what worked and what didn't for me:

  • Next.js styled-jsx: uses real CSS, moves declarations to a template literal, but you still have to do class name mapping yourself. Note: 2/5
  • Styled-components : uses real CSS, defines special (styled) components only for design. Good but makes a lot of boilerplate to override some things locally. 3/5.
  • Styled System (ThemeUI, ChakraUI): uses React props and a central theme definition. Not quite CSS, has shorthands (which helps, less code to type) in addition to camelCase CSS properties, but allows definition of a design system that resolves to CSS, easy to do local overrides. Perfect for serious long-term projects. 4/5