
Comparison of CSS in JavaScript Libraries for React - tilt
https://github.com/FormidableLabs/radium/blob/master/docs/comparison/README.md
======
colinmegill
We've stopped shipping CSS on green fields client projects. It's been amazing.
All of our styles are in JS objects that are applied to inline style tags.
It's modularized like classes are, but there is no cascade so there are no
globals. Most importantly, everything can be recomputed at any time - no
longer dealing with a static stylesheet.

var globalStyles = require("globalStyles");

var styles = { color: globalStyles.blue, padding: foo ? "15px" : "10px",
margin: bar(this.state.qux) }

We built Radium to solve the problems this causes, like :hover - it's the lib
Chan talks about in that React Europe talk christopherscot links to.

[http://projects.formidablelabs.com/radium/](http://projects.formidablelabs.com/radium/)

I talked at CSSConf about ditching CSS for inline about a month ago:

[https://www.youtube.com/watch?v=NoaxsCi13yQ](https://www.youtube.com/watch?v=NoaxsCi13yQ)

------
natmaster
Or just use webpack? Not sure what these things are trying to solve that
making a less or scss file for every component file and require-ing it
doesn't.

~~~
lstamour
There are a few arguments here on keeping your CSS in JS just as JSX allows
for HTML in JS: [https://speakerdeck.com/vjeux/react-css-in-
js](https://speakerdeck.com/vjeux/react-css-in-js)

------
fuzionmonkey
If you're interested in CSS in JS you should check out css-modules [1] and its
Webpack [2] or Browserify implementation [3].

You get scoped, modular, composable, requirable CSS without the burden of
doing styles in JS.

[1] [https://github.com/css-modules/css-modules](https://github.com/css-
modules/css-modules)

[2] [https://github.com/webpack/css-loader](https://github.com/webpack/css-
loader)

[3] [https://github.com/css-modules/css-modulesify](https://github.com/css-
modules/css-modulesify)

~~~
SeeThruHead
This is miles better than everything on that list for things that don't need
much dynamic style computation.

------
moretti
Here's another great comparison: [https://github.com/MicheleBertoli/css-in-
js](https://github.com/MicheleBertoli/css-in-js)

I think that css-modules (implemented in webpack's css-loader) is the sanest
approach: [https://medium.com/seek-ui-engineering/the-end-of-global-
css...](https://medium.com/seek-ui-engineering/the-end-of-global-
css-90d2a4a06284)

------
PhrosTT
So I'm looking for a simple solution 1 step beyond just using js style
objects. Would radium be good without creating a ton of lock-in? I can't
really sort through this giant chart.

