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
Permalink
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 add readme-zh_ch Nov 27, 2017
README.md feat: add freestyler to library list Feb 6, 2018

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

  • 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