BEM in React

ClassNameMixin.js

'use strict';

var React = require('react'),
    classSet = require('react/lib/cx'),
    _ = require('underscore');

var ClassNameMixin = {
  propTypes: {
    className: React.PropTypes.string,
    context: React.PropTypes.string
  },

  getClassName() {
    var componentClassName = this.className || this.constructor.displayName,
        classNames = [componentClassName],
        context = this.props.context,
        modifiers;

    if (this.getCSSModifiers) {
      modifiers = this.getCSSModifiers();
    } else {
      modifiers = [];
    }

    if (_.isObject(modifiers) && !_.isArray(modifiers)) {
      modifiers = classSet(modifiers).split(' ');
    }

    if (context) {
      modifiers.push('isIn' + context[0].toUpperCase() + context.slice(1));
    }

    if (this.props.className) {
      classNames = classNames.concat(this.props.className.split(' '));
    }

    classNames = _.union(
      classNames,
      _.compact(modifiers).map(m => componentClassName + '--' + m)
    );

    return classNames.join(' ');
  }
};

module.exports = ClassNameMixin;

Also, class name is only used for root selectors (for components themselves). Children selectors (Something-somePart) stay greppable.