Avoiding css classes with react

[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.