Modularise CSS the React way

Julian Viereck proposes an alternative to React's inline CSS styles.

In the React universe, content and user interactions are declared using JSX and React uses the VirtualDOM abstraction to make updating these parts fast. Declaring and managing the data becomes easy when using Facebook’s GraphQL and Relay. But for the last part about styling, I am not so sure the current solution proposed by React, to use inline styles, is the best way — I think this area deserves more attention and work.

In the following I outline a proposal that concentrates on styling React components, which also allows developers to handle the styling information in a similar modular way as React does it today when dealing with data. This is achieved by introducing a new markup called MSS, which stands for Modular Style Sheet and is similar to CSS like JSX is similar to HTML elements and relying on what I call VirtualCSS, a similar idea to the VirtualDOM, that takes responsibility of optimising the declared styles.

By Julian Viereck 

Via Modularise CSS the React way