Package Exports

bem-cn-lite
bem-cn-lite/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bem-cn-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 install --save bem-cn-lite

Usage

Generator

import block from 'bem-cn-lite';

const b = block('button');

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

Block

You can generate a 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 and reset() to bring default back.

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' });

block.reset();

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

Contributors

License

MIT