sssstyled-components v classes

classed.js

import style from './classedCSS.css'
import classnames from 'classnames'
import React from 'react'

export default React.createClass({

  render: function() {
    return (
      <div 
        className={classnames("SomeDiv", {
          active: true,
          focused: true,
          etc: false
       })} />
    );
  }

});

classedCSS.css

.SomeDiv {
  color: blue;
  &.active {
    color: green;
  }  
  &.focused {
    color: orange;
  }  
  &.etc {
    color: red;
  }
}

styled.js

import { SomeDiv } from './styledCSS.js'
import React from 'react'

export default React.createClass({

  render: function() {
    return (
      <SomeDiv 
        active
        focused />
    );
  }

});

styledCSS.js

import styled from 'styled-components';

export const SomeDiv = styled.div`
  color: blue;

  ${props => !props.active ? null : `
    color: green;
  `}

  ${props => !props.focused ? null : `
    color: orange;
  `}

  ${props => !props.etc ? null : `
    color: red;
  `}
`