Bemact does not modify React component classes, only "pure" HTML elements.
var React =var bem = bemvar MyComponent = React
Output in HTML:
Main HeaderI'm a pretty article with a link!I'm untouched because footer has no className.
npm install --save bemact
var BemSetup = BemSetupbem = elementPrefix: 'FOO' modifierPrefix: 'bar'
So what would be
block__element--modifier in original BEM syntax now becomes
It is recommended you do not use
FOO as element prefix and
bar as modifier prefix. Use something sane.
Bemact also exposes the new changed Yandex syntax:
var bem2015 = bem2015
The new element prefix is the same as before, but modifier prefix is a single lodash instead:
Using with JedWatson/classnames
classNames is one of the most popular utilities for working with CSS classes in React. Using BEM style with it can lead into quite a lot of repetition:
var className = 'main-article'var headerClassName =return<article className=className><header className=headerClassName>...</header></article>
Adding Bemact for post-processing eases the burden:
var className = 'main-article'var headerClassName =return
No need to repeat yourself.
git clone firstname.lastname@example.org:merri/bemact.git cd bemact npm install npm test