Scoped css? about react HOT 2 CLOSED

Great intuition. Several of us have thought about this opportunity and are thinking about approaches very similar to what you suggest. One of the benefits of defining style rules and css class specifications in JavaScript, is that you can use the full power of JavaScript to define styles, which we already have ways to model dependencies for. We wouldn't need another language like SASS or Less. Also, as you mention, since we also own the rendering/abstraction framework, we can ensure that we don't polute the CSS namespace. We can also ensure that components don't target nodes/class names that should be considered an implementation detail (concern) of a deeper component.

from react.

You can do the following right now:

getStyle: function() {
  return {
    fruit: {border: '1px solid black'}
  }
},
render: function() {
  return <div style={this.getStyle()}>Hello</div>;
}