Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision
Switch branches/tags
Nothing to show
Clone or download
tuchk4 Merge pull request #4 from streamich/master
feat: add freestyler to library list
Latest commit eeeae52 Mar 19, 2018
Failed to load latest commit information.
.travis.yml initial Jun 2, 2017 initial Jun 2, 2017
LICENSE initial Jun 2, 2017 add readme-zh_ch Nov 27, 2017 feat: add freestyler to library list Feb 6, 2018

Awesome CSS in JS Awesome Build Status

A collection of awesome things regarding to CSS in JS approach


Table of Contents


  • freestyler - 5th generation React styling library
  • emotion - 👩‍🎤 The Next Generation of CSS-in-JS
  • fela - Universal, Dynamic & High-Performance Styling in JavaScript
  • styled-jss - Styled Components on top of JSS
  • react-jss - JSS integration for React
  • jss - JSS is a CSS authoring tool which uses JavaScript as a host language
  • rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
  • styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
  • aphrodite - It's inline styles, but they work! Also supports styling via CSS
  • csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
  • styled-jsx - Full CSS support for JSX without compromises
  • glam - crazy good css in your js
  • glamor - css in your javascript
  • glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
  • styletron - ⚡️ Universal, high-performance JavaScript styles
  • radium - Set of tools to manage inline styles on React elements.
  • aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
  • j2c - CSS in JS library, tiny yet featureful

NOTE table is still not completed. If there is bug or need to add another library - please suggest PR.

How to read the table:

As Object - When declare CSS using Objects.

  color: 'red',

As TL - When declare CSS using Template Literals.

  color: red;

SSR - Server Side Rendering.

RN Support - React Native support.

Agnostic - Framework agnostic. Means that library could used with any framework.

Dynamic - When it is possible to write CSS that depends on runtime values like component props.

  color: props =>  props.color
props => ({
  color: props.color
  color: ${props => props.color}

Babel plugins - If there are any babel plugins for performance optimization.

Bindings - If there are packages that provide bindings for another framework or library.

Package As Object As TL SSR RN Support Agnostic Dynamic Babel plugins Bindings
emotion react-emotion, preact-emotion
fela react-fela native-fela preact-fela inferno-fela
jss react-jss styled-jss
rockey rockey-react
styletron styletron-react



Benchmarks and comparison