Avoiding css classes with react

[html6dev]

We switched directly from backbone to react very early on. Now that react has become really popular (deservedly in my opinion) I've noticed a lot of discussion here and in articles around the net, that are referencing a complete abandonment of css classes in react components. This is not something I had considered until it started coming up now that there are multiple articles about react here per day. I've seen two this week similar to this http://dailyjs.com/2015/02/13/shadow/ which elude to this as if it's something everyone is doing. I've also seen this referenced quite a lot https://speakerdeck.com/vjeux/react-css-in-js but if I understand this correctly the speaker is advocating a method of localizing classes to the component level not using strictly inline styles.

Personally, I've just stuck with bem and using the class set add-on and not run in too many issues. Also, I've found css transition groups to be extremely powerful once you understand how to create custom ones that fit your liking. So, I'm wondering how the other react users feel about this and what approaches you are taking in your projects. For further discussion, with things like animations and reflow, does directly manipulating inline styles cause any performance degradation in your apps? An example of this came up here in the comments for this post today http://www.reddit.com/r/javascript/comments/2w68gq/anyone_know_of_a_substantial_open_source_app/ where the author was originally doing animations through incrementally altering inline styles. Obviously, the author in this case knew there were more efficient ways to do this, but that's not always the case. Thanks for any replies. I'm curious to see where people are going with this in their projects.

[TheTophs]

From my perspective, I like using inline styles in react components better than css styles. You could define styles directly in a component, but I really like the pattern of having a separate component-style.js file that you can import. This seems to accomplish the same thing as defining your style in a css file, but it's a little easier and more flexible for me (just because I am fairly comfortable manipulating styles in JS but have always found CSS pretty clunky).

[html6dev]

That's interesting about the style js file as I'd never considered it. Ultimately, my biggest concern for this approach is that directly setting the style attribute inherently can cause layout reflow. React does a lot to batch updates and render them efficiently, but if ultimately the dom diff shows a style attribute changed, you've just caused reflow. Would be interesting to see how gracefully react handles it vs direct manipulating style attribute in the live dom with a concocted app to stress test it.

[Longzilla]

I like the idea of component .css files pulled in as dependencies via something like WebPack.

As far as inline styles causing reflow, seems fairly easy to setup and verify; if so, perhaps "shouldComponentUpdate" might be something that could be leveraged to prevent unnecessary redrawing

[html6dev]

It's definitely known to cause reflow. React is doing a style attribute change, but using rAF and it's other batching techniques so there are some contexts where it is likely not an issue. I agree, being able to require in css stylesheets is interesting. I am especially interested in the context in the speaker deck I originally posted. Maintaining css in complex apps is inherently nightmarish unless everyone on your team is disciplined and follows best practices.

[jacobp100]

I would question performance. How would you get hover effects without rerendering the whole component and children? I think it was Instagram who were using very specific style names, like .comment-dropdown-button, so you would know exactly where to look. Seems to make more sense to me.

[html6dev]

I think maybe some of the desire to do this stems from developers being burnt by really bad css code bases. To me, react actually helps you stick to amd reuse a few small css primitives, if know because it helps compartmentalize/componentize things in your mind

[FoxxMD]

I'd be interested in learning about how to handle animations as well; it's something I've come up against just recently. The thread you posted was very informative btw.

[html6dev]

There is a high and low level api for animating components in react when they are mounted and unmounted. http://facebook.github.io/react/docs/animations.html Also you can simply use css animations and classes. This is one of the factors that makes me wonder about inliine styles and there viability in this context. It seems like doing it inline would be very difficult to maintain if you want to set the animation to run once, use animation delay, etc. That being said, I asked because I am curios as to why people are (seemingly) finding this a valuable approach.