[clessg]

If you're using BEM, then in my opinion, styles in React are the logical conclusion. Using CSS means having 2 files per component, Button.js and Button.scss. If you want to share styles, then you can simply import an object. If you want to darken a color, you can import a function. And so on.

[drinchev]

So what about caching and rendering? So I imagine that if I render 200 buttons that have inline style it would be slower if I load one stylesheet and 200 HTML tags.

And caching problem would be if I have 2 server rendered pages ( even with JSX that's possible ) and have same styles which will be downloaded twice from two js bundles.

I think separation of those is still better solution. Not to mention stylesheet commits that are far easier to follow than just modifying a js file.

[tvararu]

You're mixing two different problems. Just because you write your CSS in JavaScript doesn't mean you have to deliver them as inline styles. [1] [2] [3]

CSS in JS is about leveraging the (relatively sane) variable/procedure declaration and control flow semantics that are already available to you in JavaScript. How you deliver them to get the best possible performance is a wholly different problem.

[1]: https://github.com/kodyl/stilr [2]: https://github.com/robertknight/ts-style [3]: https://github.com/chenglou/RCSS

[drinchev]

Thanks. This solves a lot in my head. Nice references.