I think we're still in the heavy exploration phase with styles. It reminds me of the explosion of flux frameworks until we finally settled on redux. I'm really hopeful that React will just pick a winner, and the community will stand behind em. In the react-future repo they also have some interesting ideas for taking on layout, which might be an exciting change.

In any case, I think CSS modules are still lacking. I've been using css modules for the last few months, and although I love using em, it still feels like it has a long way to go. With that said, I do think that CSS modules are probably the best general-purpose solution that we have so far (i.e. they work for the largest number of scenarios).

My first problem with css modules was the lack of value types. This is really important for stuff like colors, where you wanna declare a single color value and use it in multiple attributes (background-color, border-color, border-top-color, etc). To tackle that they eventually added module values [0]. Yay! Except that it doesn't work for attributes with commas (i.e. shadows), nor does it perform any kind of validation on the values, so typos are very likely to pass unnoticed. :( And it doesn't play well with other PostCSS plugins.

The second problem is that they don't provide a easy / simple way to tackle stuff like theming or one-off tweaks. I'm not a fan of Polymer, but that's one of the few things that I think they've gotten right. Check out the paper-tabs element [1]. They allow you to pass a css variables (--paper-tabs-selection-bar-color), but in case you don't pass any variable it'll use the fallback (--paper-yellow-a100).

These aren't insurmountable issues, and you can totally work around em, but I'd hardly consider em ideal.

I'll note one thing that I absolute LOVE about css modules and css module values: dependencies are explicit! You import specific values from different files, so it's very easy to see from what file each value come from. It's the same thing with composed classes. This is actually one of my bigger issues with Polymer: HTML imports just pollute your environment with all their junk. You import a file without any clue of what just got pulled in! If you're looking at a file with a handful of imports, good luck tracing where everything came from. It makes reading Polymer code very unpleasant. On top of that, Polymer decided to go with mixins as their composition strategy, which is also difficult to trace... Even after the React community tried em out something similar and eventually decided to move towards using higher order components.

Going beyond that, our style strategies are all really hard to share with others. If you want people to be able to use your components, you end up falling back to global css.

React Native's Stylesheet class seems to be one of the better options for inline styles (or more specifically, React Native Web's version). However, it's only good for app styles. If you have a website, it's probably not a good choice: it doesn't have any way to reset browser styles, nor does it allow you to target plain elements. I had wanted to use React Native Web's Stylesheet class for a website that was using React without any client-side JS (only server-side rendering), but once I realized I'd have to pull in even more tools to style other stuff, I dropped that idea.

I'll also note that React Native Web's Stylesheet class can be problematic in certain apps. For example, if you receive pre-compiled HTML fragments from the server and your only way of targeting those elements is to use nested selectors. Normally you'd have styles that look like this: .FooBar nav h1, .FooBar nav h2, etc. But that's not doable at the moment.

Hopefully this doesn't come off as a negative rant, because I'm actually REALLY excited to see so much experimenting and progress being made in this area. I have nothing but the utmost respect for all the awesome developers that are trying out ideas left and right.

[0] https://github.com/css-modules/postcss-modules-values

[1] https://github.com/PolymerElements/paper-tabs/blob/master/pa...