Skip to content

CSS in JS

Why We're Breaking Up with CSS-in-JS

Pros

  • Locally scoped styles
    • CSS modules can do this too!
  • CSS is in the same place as where it's used
    • JS variables in styles

Cons

Worse performance

  • runtime CSS-in-JS
    • example: emotion and styled-components
    • [x] inserts new style rules when components rendercss mo
  • multiple instances of Emotion
  • tons of issues
    • component libraries don't give you full control

Other cons

  • increase bundle size
    • ~10kb
  • clutters React Dev Tools
    • ![[image-20221027175025925.png]]

CSS Modules

  • in WebPack or PostCSS
  • automatically makes unique class names

Last update: 2022-11-04