@chancestrickland/bem-classnames

A simple utility to manage BEM class names in JavaScript

Usage no npm install needed!

<script type="module">
  import chancestricklandBemClassnames from 'https://cdn.skypack.dev/@chancestrickland/bem-classnames';
</script>

README

bem-classnames

npm

bem-classnames is a simple utility to manage BEM class names in JavaScript.

Inspired by classnames.

npm install bem-classnames

Usage

import cx from '@chancestrickland/bem-classnames';

cx(/* classes, [...props|className] */);

Simple

let classes = {
  name: 'button',
  modifiers: ['color', 'block'],
  states: ['disabled'],
};

cx(classes, { color: 'green', block: true }); // "button button--green button--block"
cx(classes, { disabled: true }); // "button is-disabled"
cx(classes, 'a b', ['c', 'd']); // "button a b c d"

With a Custom Prefix

// Default prefixes:
//
// cx.prefixes = {
//   modifiers: '{name}--',
//   states: 'is-'
// };

cx.prefixes.modifiers = '{name}-';
cx(classes, { color: 'green' }); // "button-green"

// You can add the prefixes
cx.prefixes.foo = 'foo-';
classes.foo = ['a', 'b'];
cx(classes, { a: true, b: true }); // "button foo-a foo-b"

With React

import React from 'react';
import cx from 'bem-classnames';

function Button({ children, className, ...props }) {
  let classes = {
    name: 'button',
    modifiers: ['color', 'size'],
    states: ['disabled'],
  };

  return (
    <button className={cx(classes, props, className)} disabled={props.disabled}>
      {children}
    </button>
  );
}

React.render(
  <Button color="green" size="xl" disabled={true} className="a b">
    Alo!
  </Button>,
  document.getElementById('example')
);

// "button button--green button--xl is-disabled a b"

Managing the BEM Elements

function Button({ children, className, ...props }) {
  let classes = {
    button: {
      name: 'button',
      modifiers: ['color', 'size'],
      states: ['disabled'],
    },
    button__inner: {
      name: 'button__inner',
      modifiers: ['align'],
    },
  };

  return (
    <button className={cx(classes.button, props, className)}>
      <span className={cx(classes.button__inner, props)}>{children}</span>
    </button>
  );
}

React.render(
  <Button color="green" align="center">
    Alo!
  </Button>,
  document.getElementById('example')
);

// button -> "button button--green"
// span -> "button__inner button__inner--center"