Scoped css?

[chenglou]

The way React renders DOM is really interesting. I was wondering if there's any plan to include a functionality that sets the style of the rendered content without css name pollution. Something like the following:

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

And initialize the style at the beginning by changing the key to something unique, say fruit-abrt2 (same for the rendered class name). Of course, then there's the concern that a css rule might not reach fruit anymore since the class name doesn't actually exists, but I see such a huge benefit here that I believe it's worth thinking over this and find a solution.

[jordwalke]

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.

[vjeux]

You can do the following right now:

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

Let's close this out until someone comes with a real proposal :)