Comparison of CSS in JavaScript Libraries for React(github.com)

33 pointsby tiltvor 11 Jahren9 comments

Comparison of CSS in JavaScript Libraries for React

https://github.com/FormidableLabs/radium/blob/master/docs/comparison/README.md

5 comments

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/

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

https://www.youtube.com/watch?v=NoaxsCi13yQ

natmastervor 11 Jahren

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.

lstamourvor 11 Jahren

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

christopherscotvor 11 Jahren

Here's another talk that illustrates some of the emerging thoughts around inline styles in React https://www.youtube.com/watch?v=ERB1TJBn32c

supercodervor 11 Jahren

Great thing is this does away with the need for these macro languages like less and scss.

fuzionmonkeyvor 11 Jahren

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

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

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

SeeThruHeadvor 11 Jahren

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

morettivor 11 Jahren

Here's another great comparison: 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...

PhrosTTvor 11 Jahren

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.