bem-cn-lite

Lite version of the friendly BEM-style class name generator, which is great for React

It’s a wrapper function for bem-cn module.

Install

With Node.js:

npm i --save bem-cn-lite

Usage

Generator

import block from 'bem-cn-lite';

const b = block('button');

b is a class name generator which was bind to button.

Block

You can generate block-level class name with function b.

If you provide an object as first argument, then it treats as modifiers for the block.

// 'button'
b(); 
// 'button button_modifier'
b({modifier: true});
// 'button button_modifier_value'
b({modifier: 'value'});

Element

First argument must be string. Second argument can be an object.

// 'button__icon'
b('icon'); 
// 'button__icon button__icon_modifier'
b('icon', {modifier: true});
// 'button__icon button__icon_modifier_value'
b('icon', {modifier: 'value'});

Mixin

Sometime, you might like to have a mixin on your block.

// 'button mixin'
b(null, 'mixin');
// 'button button_modifier mixin'
b({modifier: true}, 'mixin');

Also, mixin on element is welcome too.

// 'button__icon mixin'
b('icon', 'mixin'); 
// 'button__icon button__icon_modifier mixin'
b('icon', {modifier: true}, 'mixin');

Builder

It might you’d like to have an access to original methods of the bem-cn generator in rare case.

// 'block__icon is-loading icon'
b.builder()('icon').is({'loading': true}).mix('icon').toString();

Custom settings

You can use alternative naming schemes for your BEM naming convention. Just call static setup method on bem-cn-lite module:

import block from 'bem-cn-lite';

// Two Dashes style with namespaces
block.setup({
  ns: 'ns-',
  el: '__',
  mod: '--',
  modValue: '-'
});

const b = block('button');

// 'ns-button__icon ns-button__icon--modifier-value'
b('icon', {modifier: 'value'});

... and reset to default settings, if you need it.

block.reset();

// 'button__icon button__icon_modifier'
b('icon', {modifier: true});

SeqviriouM/bem-cn-lite