Awesome CSS in JS

A collection of awesome things regarding to CSS in JS approach

中文 README

Libraries

linaria - Zero-runtime CSS in JS library
freestyler - 5^th 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	✅		✅		✅

A Unified Styling Language - why writing your styles in JavaScript isn’t such a terrible idea after all, and why I think you should be keeping an eye on this rapidly evolving space.
Is CSS-in-JS really bad for UX? - CSS in JS performance implications - JS developers are too focused on DX and keep forgetting about how important performance for UX is.
I swore never to use CSS in JS, here are 6 reasons why I was wrong- "When I first heard of this idea, I was shocked..." But here are 6 reasons why it is useful.
Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS - Making Styling Better With better CSS / with Components / with JavaScript and final approach with ITCSS and Aphrodite
Rockey. Motivation and Requirements - Article about requirements for CSS in JS approach and motivation to develop another one CSS in JS library - rockey.
CSS in JS: The Argument Refined
Inline Styles are so 2016
“Scale” FUD and Style Components
JSS is a better abstraction over CSS
A 5-minute Intro to Styled Components
Styled Components: Enforcing Best Practices In Component-Based Systems
💅 styled components 💅 — Production Patterns
Introducing glamorous 💄