Skip to content
Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision
Branch: master
Clone or download
tuchk4 Merge pull request #9 from adriankremer/master
chore: added react-native support for emotion
Latest commit 5d2d40f Mar 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.travis.yml initial Jun 2, 2017
CONTRIBUTING.md initial Jun 2, 2017
LICENSE initial Jun 2, 2017
README-ZH_CN.md Mark glam and glamor as TL in table Mar 20, 2018
README.md chore: added react-native support for emotion Mar 25, 2019

README.md

Awesome CSS in JS Awesome Build Status

A collection of awesome things regarding to CSS in JS approach

中文 README

Table of Contents

Libraries

  • linaria - Zero-runtime CSS in JS library
  • 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
styled-components
aphrodite
csx
glam
glamor
glamorous
styletron styletron-react
aesthetic
j2c

Articles

Videos

Benchmarks and comparison

You can’t perform that action at this time.