Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
bem-cn-lite
Advanced tools
Lite version of the friendly BEM-style class name generator, which is great for React
Lite version of the friendly BEM-style class name generator, which is great for React
It’s a wrapper function for bem-cn module.
With Node.js:
npm i --save bem-cn-lite
var block = require('bem-cn-lite');
var b = block('button');
b
is a class name generator which was bind to button
.
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'});
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'});
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');
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')()
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});
FAQs
Lite version of the friendly BEM-style class name generator, which is great for React
The npm package bem-cn-lite receives a total of 1,115 weekly downloads. As such, bem-cn-lite popularity was classified as popular.
We found that bem-cn-lite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.