In React usually we specify styles within the React classes. For a beginner who is used to write styles in the CSS file it becomes difficult to completely avoid inline styles and external styling.

We will see what are the best practices in styling. Considering React components which are still in an experimenting phase we won’t be able to find many best practices. The state of components are managed by React. Rather add state-styles directly than building components to render with conditional state classes.

// 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 : {}} />

We are using object.assign so it makes our components reusable with different styles. Using properties like <TodoItem dueStyle={ fontWeight: "bold" } /> we can override default styles.

To use layouts you can use any available layouts and not use inline layout styles. Wrap your components with layout components.

// This couples your component to the layout system
// It reduces the re-usability 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>

Now we will discuss about the appearance part of the styling where inline styling is mostly used. Eventually it is up to the component you are designing and your comfort with JavaScript. You might need to take the assistance of a library like Radium.