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;

https://github.com/rackt/react-modal/blob/master/lib/components/ModalPortal.js#L7-L18

Wow that file doesn't help legibility at all, but I think I can see your point. Thanks for the link :)

one of the reasons to use BEM is to make your code greppable, so that you can easily identify where selectors are used.

Well, maybe, but for me the win is mostly no cascading. I don't need it being greppable because of consistent naming. I know SomeComponent* styles always live in SomeComponent.less.

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