Simple utility for generating classnames according to the BEM methodology.

IMPORTANT: The library is not transpiled.

By keep transpiling libraries we push web backward with legacy code which is unneeded for most of the users.

If you need to support legacy users, you can optionally transpile the library in your build pipeline.

npm install @morev/bem-classnames

yarn add @morev/bem-classnames

pnpm add @morev/bem-classnames

Module exports a BEM classnames factory that allows flexibly customize the syntax.

Recommended usage is create and export your own bem-factory with options suitable for you and next use it to keep classnames consistent. With this usage you can make module to work with any BEM-like alternative syntax.

import { bemClassnames } from '@morev/bem-classnames';

// Default options
export const bemFactory = bemClassnames({
  hyphenate: true,
  namespace: '',
  delimiters: {
    element: '__',
    modifier: '_',
    modifierValue: '_',
  },
});

Next, import this factory into your component, declare the block name and the function call will transform JS declarations into classnames:

import { bemFactory } from 'bem-factory.js';
const b = bemFactory('block');

b();
// block

b({ active: true })
// block block_active

b({ active: true, iterator: 1 })
// block block_active block_iterator_1

b({ active: true }, 'static', 'is-pinned')
// block block_active static is-pinned

b('element');
// block__element

b('element', { static: true });
// block__element block__element_static

b('element', 'static');
// block__element static

The benchmark measures stable and varied class generation, factory creation, and cold starts. Run it after installing dependencies:

pnpm run benchmark

Save results to benchmarks/results and compare later changes against them:

pnpm run benchmark --save baseline
pnpm run benchmark --compare benchmarks/results/<snapshot>.json

BEM methodology