React BEM

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

Usage

React BEM automatically generates BEM style classes on React components... So you don't have to.

Installation

bower install react-bem

Example

JSX Component:

varHeader=React.createClass({mixins: [ReactBEM],bem_blocks: ["widget"],bem_block_modifiers: ["christmas"],bem_render: function(){return(<headerclassName="no-overwrite"><h1><spanmodifiers="blinking">HEADER:</span> This is the Header</h1></header>);}});

Translates to:

<headerclass="no-overwrite widget--christmas__header widget__header" data-reactid=".0"><h1class="widget--christmas__h1 widget__h1" data-reactid=".0.0"><spanclass="widget--christmas__span--blinking widget--christmas__span widget__span--blinking widget__span" data-reactid=".0.0.0"></span><spandata-reactid=".0.0.1">
This is the Header
</span></h1></header>

You can see it live, how it attaches the BEM classes, here.

Custom E

Don't want the E in BEM to be the HTML element name? Don't blame you.

varHeader=React.createClass({mixins: [ReactBEM],bem_blocks: ["widget"],bem_block_modifiers: ["christmas"],bem_render: function(){return(<headerclassName="no-overwrite"><h1role="title"><spanmodifiers="blinking">HEADER:</span> This is the Header</h1></header>);}});

Translates to:

<headerclass="no-overwrite widget--christmas__header widget__header" data-reactid=".0"><h1class="widget--christmas__title widget__title" role="title" data-reactid=".0.0"><spanclass="widget--christmas__span--blinking widget--christmas__span widget__span--blinking widget__span" data-reactid=".0.0.0"></span><spandata-reactid=".0.0.1">
This is the Header
</span></h1></header>

There's a lot of reasons why you should be styling with more than just the class attribute. But say you want to define a role and use something different for your BEM element. Or say you just have a religion about not using the role attribute. Fine.

varHeader=React.createClass({mixins: [ReactBEM],bem_blocks: ["widget"],bem_block_modifiers: ["christmas"],bem_render: function(){return(<headerclassName="no-overwrite"><h1role="somerole"bem_element="title"><spanmodifiers="blinking">HEADER:</span> This is the Header</h1></header>);}});

Translates to:

<headerclass="no-overwrite widget--christmas__header widget__header" data-reactid=".0"><h1class="widget--christmas__title widget__title" role="somerole" data-reactid=".0.0"><spanclass="widget--christmas__span--blinking widget--christmas__span widget__span--blinking widget__span" data-reactid=".0.0.0"></span><spandata-reactid=".0.0.1">
This is the Header
</span></h1></header>

Other Resources

• react-bem-helper - A React BEM Helper.
• bem-classnames - A React BEM class name manager.
• bem-cn - A React BEM class name generator.
• b_ - A React class name formatter.

License

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