nano-bem

A tiny library to generate BEM-style class names. Influenced by bem-cn: https://github.com/albburtsev/bem-cn.

Example Usage

1import React from 'react';
2import block from 'nano-bem';
3import './index.css';
4
5const b = block('my-block');
6
7class MyBlock extends React.PureComponent {
8  render() {
9    return (
10      <div className={b()}>
11        I am ".my-block"
12        <div className={b('top')>
13          I am ".my-block__top"
14        </div>
15        <div className={b('bottom', { foo: true, bar: 'orange' })>
16          I am ".my-block__bottom .my-block__bottom_foo .my-block__bottom_bar_orange"
17        </div>
18      </div>
19    );
20  }
21}
22

With css-loader's "modules" setting (https://github.com/webpack-contrib/css-loader#modules):

1import React from 'react';
2import block from 'nano-bem';
3import css from './index.css';
4
5const b = block('my-block', css);
6// local class names will be mapped to unique identifiers
7...