Skip to content

Instantly share code, notes, and snippets.

@erhangundogan

erhangundogan/CSS-in-JS.md

Last active May 22, 2018 16:21
Show Gist options
  • Save erhangundogan/3daa993731a51c30318911595bbe3acd to your computer and use it in GitHub Desktop.
Save erhangundogan/3daa993731a51c30318911595bbe3acd to your computer and use it in GitHub Desktop.
Download ZIP
React CSS-in-JS showdown
Raw
CSS-in-JS.md

styled-components

styled-components

Introduction | Github

Pros

  • Component based approach
  • No SCSS,CSS files. Therefore no need extra configuration
  • Inline styles can be used with react-native
  • Linter, IDE support
  • Theming support
  • Server-side rendering
  • Biggest community

Cons

  • Slower than CSS based approach
  • Styles get into blob. Which means:
    • App size gets bigger than CSS based approach
    • Browsers download CSS and JS files on parallel. So we cannot able to use this feature
  • Rebuilds app when styles changed

emotion

emotion

Introduction | Github

Pros

  • Similar to styled-components pros
  • But much faster
  • Inspired from glamorous and styled-components

Cons

  • Similar to styled-components cons

glamorous

Introduction | Github

Pros

  • Paypal maintainer
  • Big community

Cons

  • Uses POJO to pass styles

cxs

Introduction | Github

Pros

  • Fastest
  • Very tiny library

Cons

  • Small community compared to others
  • Needs CSS, SCSS files
  • Less resources to deal with usage and issues etc

More resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment