necolas / css-in-js

React: CSS in JS techniques comparison.

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	Autoprefixer Included	Pseudo Classes	Media Queries	Styles As Object Literals	Extract CSS File
babel-plugin-css-in-js	0.1.0	x	x	x	x	x
bloody-react-styled	3.0.0		x	x
classy	0.3.0		x	x	x
css-loader	0.15.6		x	x		x
j2c	0.7.3	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-modules	3.0.2		x	x		x
react-free-style	0.6.0		x	x	x
react-inline-css	1.2.0		x	x
react-inline	0.6.3	x	x	x	x	x
react-inline-style	0.1.0	x	x	x	x
react-jss	1.0.0	x	x	x	x
react-look	0.6.1	x	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-theme	0.1.4				x
reactcss	0.3.2	x			x
smart-css	1.1.1		x	x	x
stilr	1.1.0		x	x	x	x
styling	0.2.0		x		x	x

Testimonials

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

SurviveJS / Styling React by Juho Vepsäläinen

React Inline Styles are Fundamentally Flawed by Joey Baker

The Case for CSS Modules by Mark Dalgleish

Contributing

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