classnames-bem

Simple utility for combining DOM class names and converting them to BEM modifiers.

What is a modifier?

Modifier is a flag on blocks or elements. It's used to change appearance, behavior or state.

Read more about BEM and modifiers here.

Usage

var classNames = require('classNames');
import classNames from 'classNames';

Format

var className = classNames(baseClass, ...modifiers);

Examples

classNames('button', 'white');
 
//=> 'button button--white'

classNames('button', 4);
 
//=> 'button button--4'

classNames('button', {
  'active': false,
  'disabled': true
});
 
//=> 'button button--disabled'

classNames('button', [
  'blue',
  'disabled'
]);
 
//=> 'button button--blue button--disabled'

classNames('button', [
  undefined,
  null,
  NaN
]);
 
//=> 'button'

Tests

To run the tests with mocha use:

npm test

Idea

The original idea for the utility without the BEM modifiers comes from JedWatson. https://github.com/JedWatson/classnames