There's a set of libraries like Aphrodite, Glitter, jsx-style, and JSS that help you do this. I'd look at some benchmarks [1] and do some comparison before you

There's a set of libraries like Aphrodite, Glitter, jsx-style, and JSS that help you do this. I'd look at some benchmarks [1] and do some comparison before you make a decision yourself. I've worked extensively with Aphrodite (disclaimer, my employer maintains it) and have found it works with React to make a pretty good workflow for SPAs. It does require some buy-in from everyone involved with the codebase since you'll have Aphrodite-defined styles clashing with stuff in external stylesheets, and there are occasional edge cases where you'd like to use some crazy CSS selector that Aphrodite doesn't support, but this is often a sign that you should be restructuring your component in a more straightforward way. The style reuse and composability story is very good, since all styles are wrapped around bare JS objects which are super easy to manipulate and the ES6 spread syntax [2] makes it all look very elegant. If it's important to you to keep styles and markup in different files, you can do that too as long as you're happy giving them all .js/.jsx/.ts extensions. In general it is frustrating to me that total buy-in into the React model comes at the cost of support for actual standards like Web Components, but I never want to write UI in a non-declarative way again so I'm hoping someone smarter than I can figure out how to bring these two worlds together so we can let the browser properly namespace our CSS rather than relying on randomly generated class name infixes as Aphrodite does. [1] https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.cae5q4lkd https://engineering.hellofresh.com/the-css-in-js-battle-89c3... [2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...