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;

@mjackson (are mentions broken here?), it sure looks cleaner that way!
Thank you 👍

Haha, yeah I think mentions are broken :) yw!!

this is convenient for the original author, but one of the reasons to use BEM is to make your code greppable, so that you can easily identify where selectors are used. If you're concatting them with JS, you lose this.

@rpflorence Would you suggest some other approach, or do you just explicitly set all the classnames?

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.