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