Skip to content
Lite version of the friendly BEM-style class name generator, which is great for React
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests moved setup and reset methods to the module level Jan 29, 2017
.editorconfig added editorconfig file Jan 29, 2017
.gitignore implemented a lite version of the bem-cn Jun 18, 2016
.npmignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

bem-cn-lite

Build Status

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

var block = require('bem-cn-lite');

var 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(false, '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 icon is-loading'
b.builder()('icon').is({'loading': true}).mix('icon')()

Custom settings

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

var block = require('bem-cn-lite');

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

// '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});
You can’t perform that action at this time.