React: CSS in JS techniques comparison.
JavaScript HTML CSS Makefile
Latest commit eccaee3 Jan 6, 2017 @bradleyayers bradleyayers committed with Add TypeStyle (#50)
Permalink
Failed to load latest commit information.
aphrodite Update aphrodite (#28) Jun 6, 2016
babel-plugin-css-in-js Update package version Mar 1, 2016
bloody-react-styled clean up Oct 5, 2015
classy classy Aug 29, 2015
csjs Added csjs Jan 14, 2016
css-constructor Update css-constructor to 0.1.1 (#47) Dec 13, 2016
css-loader fixed css-loader media query Sep 5, 2015
css-ns css-ns Jan 22, 2016
cssobj ADD: cssobj project demo (#34) Aug 4, 2016
cssx-loader Add missing peerDependency: babel-core (#45) Dec 8, 2016
es-css-modules Add ES CSS Modules (#29) Jun 8, 2016
glamor Add missing peerDependency "babel-core" (#42) Dec 1, 2016
hyperstyles Added hyperstyles example. Updated table. Jan 17, 2016
j2c Bump j2c version Jan 12, 2016
jsxstyle clean up Oct 5, 2015
radium updated radium Aug 3, 2015
react-css-builder clean up Oct 5, 2015
react-css-components use button in react-css-components Jun 13, 2016
react-css-modules clean up Oct 5, 2015
react-cxs react-cxs Jul 12, 2016
react-fela use style prop in react-fela Aug 1, 2016
react-free-style clean up Oct 5, 2015
react-inline-css clean up Oct 5, 2015
react-inline-style react-inline-style Jul 18, 2015
react-inline clean up Oct 5, 2015
react-jss update jss example Apr 9, 2016
react-look fixed package by including /dom package Nov 25, 2015
react-native-web Add react-native-web-css-in-js Dec 19, 2015
react-statics-styles clean up Oct 5, 2015
react-styl clean up Oct 5, 2015
react-style clean up Oct 5, 2015
react-styleable button.css Sep 5, 2015
react-stylematic Added react-stylematic Apr 28, 2016
react-theme add proper button label to react-theme example Aug 13, 2015
react-vstyle react-vstyle Jun 3, 2016
reactcss reactcss Jul 3, 2015
scope-styles Add scope-styles Jan 14, 2016
smart-css clean up Oct 5, 2015
stile-react-media-queries added stile + react-media-queries Jan 16, 2016
stilr clean up Oct 5, 2015
style-it Update reactive-style; renamed to style-it to match api (#36) Sep 8, 2016
styled-components styled-components Oct 14, 2016
styled-jsx styled-jsx Dec 7, 2016
styletron-react styletron Dec 7, 2016
styling clean up Oct 5, 2015
typestyle Add TypeStyle (#50) Jan 6, 2017
uranium uranium Nov 27, 2016
.gitignore button.css Sep 5, 2015
LICENSE Initial commit May 25, 2015
README.md Add TypeStyle (#50) Jan 6, 2017

README.md

CSS in JS

React: CSS in JS techniques comparison.

Usage

Inside each package folder, run:

npm i
npm run build && open index.html

Features

How to read the table

More crosses doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.

Package Version Automatic Vendor Prefixing Pseudo Classes Media Queries Styles As Object Literals Extract CSS File
aphrodite 0.1.2 x x x x x
babel-plugin-css-in-js 1.2.2 x x x x x
bloody-react-styled 3.0.0 x x
classy 0.3.0 x x x
csjs 1.0.0 x x
css-constructor 0.1.1 x x x
css-loader 0.15.6 x x x
css-ns 1.0.0 x x x
cssobj 0.2.21 x x x x
cssx-loader 3.8.0 x x x x
es-css-modules 1.2.3 x x x
glamor 2.1.0 x x x x x
hyperstyles 3.3.0 x x x
j2c 0.10.0 x x x x
jsxstyle 0.0.14 x x
radium 0.13.5 x x x x
react-css-builder 0.2.0 x
react-css-components 0.6.9 x x x
react-css-modules 3.0.2 x x x
react-cxs 1.0.0-beta.4 x x x x
react-fela 2.1.0 x x x x x
react-free-style 0.6.0 x x x x
react-inline-css 1.2.0 x x
react-inline-style 0.1.0 x x x x
react-inline 0.6.3 x x x x x
react-jss 2.0.5 x x x x x
react-look 0.6.1 x x x x
react-native-web 0.0.11 x x x
react-statics-styles 3.0.2 x x x
react-styl 0.0.1 x x
react-style 0.5.5 x x x
react-styleable 1.4.0 x x x
react-stylematic 1.0.1 x x x x x
react-theme 0.1.4 x
react-vstyle 0.1.0 x x x x x
reactcss 0.3.2 x x
scope-styles 0.6.0 x x x x
smart-css 1.1.1 x x x
stile + react-media-queries 2.0.0 x x x
stilr 1.1.0 x x x x
style-it 1.2.9 x x
styled-components 1.0.3 x x x
styled-jsx 0.0.7 x x x x
styletron-react 2.1.2 x x x x x
styling 0.2.0 x x x
typestyle 0.22.3 x x x x
uranium 0.1.2 x x

Testimonials

"Wow, this totally makes my week!" - Dan Abramov

"nice compilation of css-in-js techniques" - TJ Holowaychuk

SurviveJS / Styling React by Juho Vepsäläinen

The Case for CSS Modules by Mark Dalgleish

First Class Styles by Mark Dalgleish

Styling React.JS applications by Max Stoiber

Contributing

If your package is not listed here, feel free to add it.