Start with state-styles
React is already managing the state of your components, this makes styles of state and behavior a natural fit for colocation with your component logic.
Instead of building components to render with conditional state-classes, consider adding state-styles directly:
// Typical component with state-classes <li className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} /> // Using inline-styles for state <li className='todo-list__item' style={(item.complete) ? styles.complete : {}} />
Note that we're using a class to style appearance but no longer using any .is- prefixed class for state and behavior.
We can use Object.assign (ES6) or _.extend (underscore/lodash) to add support for multiple states:
// Supporting multiple-states with inline-styles <li 'todo-list__item' style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
Customization and reusability
Now that we're using Object.assign it becomes very simple to make our component reusable with different styles. If we want to override the default styles, we can do so at the call-site with props, like so: <TodoItem dueStyle={ fontWeight: "bold" } />. Implemented like this:
<li 'todo-list__item' style={Object.assign({}, item.due && styles.due, item.due && this.props.dueStyles)}>
Layout
Personally, I don't see compelling reason to inline layout styles. There are a number of great CSS layout systems out there. I'd just use one.
That said, don't add layout styles directly to your component. Wrap your components with layout components. Here's an example.
// This couples your component to the layout system // It reduces the reusability of your component <UserBadge className="col-xs-12 col-sm-6 col-md-8" firstName="Michael" lastName="Chan" /> // This is much easier to maintain and change <div class="col-xs-12 col-sm-6 col-md-8"> <UserBadge firstName="Michael" lastName="Chan" /> </div>
For layout support, I often try to design components to be 100% width and height.
Appearance
This is the most contentious area of the "inline-style" debate. Ultimately, it's up to the component your designing and the comfort of your team with JavaScript.
One thing is certain, you'll need the assistance of a library. Browser-states (:hover, :focus), and media-queries are painful in raw React.
I like Radium because the syntax for those hard parts is designed to model that of SASS.
Code organization
Often you'll see a style object outside of the module. For a todo-list component, it might look something like this:
var styles = { root: { display: "block" }, item: { color: "black" complete: { textDecoration: "line-through" }, due: { color: "red" } }, }
getter functions
Adding a bunch of style logic to your template can get a little messy (as seen above). I like to create getter functions to compute styles:
React.createClass({ getStyles: function () { return Object.assign( {}, item.props.complete && styles.complete, item.props.due && styles.due, item.props.due && this.props.dueStyles ); }, render: function () { return <li style={this.getStyles()}>{this.props.item}</li> } });
Further watching
I discussed all of these in more detail at React Europe earlier this year: Inline Styles and when it's best to 'just use CSS'.