Yeah, if you go the inline styles route, the "cascading" and "sheets" part disappear (to some extent, anyway - you still need some global styles). This isn't a bad thing, though. Good CSS architectures usually avoid the cascade as much as possible. Imagine you have an Avatar inside a Header:

    class Header extends React.Component {
      render() {
        return (
          <div className="Header">
            <Logo />
            <Avatar />
          </div>
        );
      }
     }

You want the Avatar to be floated to the right, so you do:

.Header .Avatar { float: right; }

Unfortunately, this breaks encapsulation. It's basically monkey-patching and makes your components less portable. It causes a lot of problems in larger apps that aren't apparent until down the line.

So you could use BEM:

    <div className="Header">
      <Logo />
      <Avatar className="Header__Avatar" />
    </div>

This prevents many of the problems with global selectors, specificity, and encapsulation, but it gets repetitive and is a little ugly once things get more complicated. It's still pretty bug-prone. Another way to do it is:

    const styles = {
      base: {
        // ...
      },
      avatar: {
        float: 'right'
      }
    };

    <div style={styles.base}>
      <Logo />
      <Avatar style={styles.avatar} />
    </div>

Which is how Radium and React Style do it. In this case, it might be <Avatar is="avatar" /> but it's the same idea. Specificity, modularity, namespacing, indeterminism, etc., are almost all fixed. Plus you now have the ability to dynamically compute values, import constants and functions, get values statically from CSS, and apply modifiers like `Header--loggedOut` by doing {this.props.isLoggedOut && styles.loggedOut}.