Утилита для форматирования классов в стиле BEM

Пример использования

import React from 'react';
import bem from 'fr-bem';

const {cnBlock, el} = bem('example'); 
export default class Example extends React.Component {
    render() {
        const {isActive, className, children} = this.props;
        return <div className={cnBlock(className, {'is-active': isActive})}>
            <div className={el('content')}>{children}</div>
        </div>
    }
}

Запуск примера

npm run example

Подключение

    import bem, {cn} from 'fr-bem';

Создание хелперов

const {block, el, cnBlock, cnEl} = bem('some-block');

block(...mods)

mods - модификаторы

каждый модификатор может быть

• объектом вида {<модификатор>: any} Ключи которым соответствует truthy-значение попадут в список модификаторов
• falsy-значением - игнорируется
• truthy-значением - добавляется в список модификаторов
• массивом модификаторов

Если модификатор является массивом, то каждый его элемент рассматривается как один из этих вариантов, включая вариант с массивом. То есть массивы модификаторов можно сколько угодно вкладывать один в другой, они распакуются.

Примеры

block() === 'some-block';
//truthy-значение
block('a') === 'some-block some-block--a';
block('a', 'b') === 'some-block some-block--a some-block--b';
//falsy-значение
block(null, 'a', undefined) === 'some-block some-block--a';
//объект
block({
    a: true,
    b: false
}) === 'some-block some-block--a';
//произвольная вложенность массивов
block(['a', ['b'], {d: true}], 'c') === block('a', 'b', 'c', {d: true})

el(name, ...mods)

• name - название элемента
• mods - модификаторы. Ведёт себя также как в block

Например

el('some-element') === 'some-block__some-element';
//+truthy модификатор
el('some-element', 'a') === 'some-block__some-element some-block__some-element--a';
el('some-element', 'a', 'b') === 'some-block__some-element some-block__some-element--a some-block__some-element--b';
//и т.д по аналогии с block

cn(..classNames)

Ничего не знает про bem, но умеет склеивать классы так же как block и el складывают модификаторы

То есть

    cn('some-class') === 'some-class';
    //+truthy класс
    cn('some-class', 'a') === 'some-class a';
    cn(['some-class', 'a', 'b']) === 'some-class a b';
    //и т.д...

cnBlock(classNames, ...mods), cnEl(classNames, name, ...mods)

Кроме модификаторов добавляют дополнительные классы.

• classNames - дополнительные классы. Добавятся к результирующему набору классов как если бы classNames был прокручен через cn
• остальные аргументы - то же что и в block/el