Skip to content

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

License

Notifications You must be signed in to change notification settings

tuchk4/awesome-css-in-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published