Awesome
Awesome CSS in JS
A collection of awesome things regarding to CSS in JS approach
Table of Contents
Libraries
- linaria - Zero-runtime CSS in JS library
- freestyler - 5<sup>th</sup> 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
- CSS in JavaScript
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.