React ATOM

BEM class names are systematic. So why write them yourself?

Usage

React ATOM automatically generates BEM style classes on React components... So you don't have to. Then it atomizes them, so they're really fast/performant.

Example

JSX Component:

var Test = React.createClass({
  mixins: [ReactBEM, ReactATOM],

  bem_blocks: ["widget"],

  bem_translate_class: function(bem_classes) {
    return this.atomize(bem_classes);
  },

  bem_render: function() {
    return (
      <section class="no-overwrite">
        <h3 role="title">Price Form</h3>
        <form>
          <input type="text" name="amount" modifiers="amount" />
          <input type="submit" name="submit" modifiers="submit" role="button" />
        </form>
      </section>
    );
  }
});

Translates to:

<section class="painted-blue text-left" data-reactid=".0">
    <h3 class="typography-loose" data-reactid=".0.0" role="title">
        Price Form
    </h3>
    <form data-reactid=".0.1">
        <input class="rounded-default font-small" type="text" data-reactid=".0.1.0" name="amount"></input>
        <input class="painted-light-grey widget__button--submit" type="submit" data-reactid=".0.1.1" role="button" name="submit"></input>
    </form>
</section>

You can see it live, how it attaches the BEM classes and then converts those to atoms here.

Resources

• ATOM - The ATOM CSS specification.
• BEM - BEM explained.
• React BEM - Automatic BEM class generation for React Components.

License

React BEM is free--as in BSD. Hack your heart out, hackers.