streamich/awesome-css-in-js

Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision

Awesome CSS in JS

A collection of awesome things regarding to CSS in JS approach

中文 README

Table of Contents

• Libraries
• Articles
• Videos
• Benchmarks

Libraries

• 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	✅		✅		✅

Articles

• 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 💄

Videos

• Styling React/ReactNative Applications - Max Stoiber at React Amsterdam
• CSS in JS tech chat with Kent C. Dodds and Sarah Drasner
• CSS in JS without Compromise by François de Campredon at react-europe 2016
• Glamorous Walkthrough by Kent C. Dodds
• ColdFront16 • Glenn Maddern: The Future of Reusable CSS
• Ryan's Random Thoughts on Inline Styles by Ryan Florence

Benchmarks and comparison

• tuchk4/css-in-js-app - React application with different css-in-js approaches and libraries.
• A-gambit/CSS-IN-JS-Benchmarks RESULTS.md
• hellofresh/css-in-js-perf-tests - CSS-in-JS performance tests
• jsperf: jss-vs-css
• jsperf: classes vs inline styles
• MicheleBertoli/css-in-js React: CSS in JS techniques comparison.