Avoiding css classes with react
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.
8 comments · 56% upvoted · other discussions
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 [OP] 3 points · Feb 2015
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 1 points · Feb 2015
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 [OP] 2 points · Feb 2015
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.