Don’t react inline styles create a performance lag? At least that’s what I’ve heard. I love writing inline with JS and radium, and then refactoring out to a styles.js file, but I’ve heard it’s slow. Any thoughts?
I’ve changed my stance since then (things change quickly these days). 
I’ve moved over to using BEM as a stopgap until CSS Modules work with Meteor out of the box.
1 Like
If you are not doing hard CSS tricks inline CSS is pretty good. Specially it’s a pretty good idea to go on that approach.
We started to use Radium and quite loving the experience.
5 Likes
I’d like to point out that the term “inline style” is somewhat overloaded. There’s a difference between this, which is very brittle:
<div id="button1" class="btn" style="background-color: blue">
And this, which has a lot of benefits to it:
<div id="button1" class="btn" style="{{getBackgroundColor}}">
PHP has experimented with both; and it should be noted that most of the folks advocating for inline styles are talking about using them via inline helpers. It should also be noted that PHP was using helpers for years, with mixed success, and there’s a reason that best practices evolved into CSS, LESS, SCSS, etc.
That being said, there’s a tangible difference between a server using inline helpers in PHP to render to a static page that then gets shipped over the wire, and a client-side router that renders a single-page app using inline-helpers. So, to that point, the inline stylists might be repeating practices from yesteryear that are known to be problematic; but they’re doing it in a considerably different context.
Spirals. Things be repeating; yet iterated.
4 Likes
FYI
Recently, I did some digging to React and Styling and here’s my findings on this.
This discussion gives me a lot of insights. Thanks all.
Here’s the article: https://voice.kadira.io/state-of-react-and-css-501d179443d3
2 Likes
I just wanted to add this link on this thread today 
Very comprehensive article talking about different options. The devtool you mentioned, I was a little confused/wondering what it does? Is it this: https://github.com/kadirahq/react-storybook ? Look forward to hearing more about how it works.
Yeah! Will do it in this week.
So I know I said I’d walk away, and I know I’m necroing this post, but I feel this is the best place to share this.
It presents an interesting solution to 99.9% of the reasons I say don’t use inline styles. I can think of exactly one use case that I’ve witnessed that isn’t covered by this solution. That one use case was user defined css, which this doesn’t exactly make easy.
I haven’t read it in depth, and there may be hidden gotchas, but, this might just be the middle ground people are hoping for. A proper nesting and cascading system but purely in javascript with inline styles. I look forward to seeing how people respond to this.
1 Like
I’ve moved away from BEM and back to JS styles. Mostly for two reasons:
- It allows me to easily package up React libraries and share them without putting expectations on the end-developer as to what their CSS setup is (BEM, modules, etc)
- React Storybook works much better when you use JS styles.
1 Like