@dr/bem-helper

Helper functions to create BEM-style classnames

Install

npm install @dr/bem-helper

Usage

import bem from "@dr/bem-helper";

var className = bem("block", "element", { modifier: true });
// className = "block__element block__element--modifier"

API

• bem
• bemStyles

bem

A function that creates all applicable combinations of classnames for an element scoped to a block in BEM-style format.

Arguments

• block (string) - The block element for the classname.
• ...args (string|object) - Optional. Any number of the following arguments are allowed:

element (string) - Optional. modifier (object) - Optional. Keys are used for modifier names. Values determine whether to turn the modifier off (false, "", null or undefined) or on - either through true or a value which will be appended to the modifier name; {modifier: true} -> "--modifier", {modifier: "value"} -> "--modifier-value". Should not follow a previous modifier argument.

Examples

Basic

var className = bem("block", "element");
// className === "block__element"

Elements with modifiers

var className = bem("block", { modifier: true });
// className === "block block--modifier"

Modifiers with values

var className = bem("block", "element", { modifier: "value", modifier2: false });
// className === "block__element block__element--modifier-value"

Prebinding helpers

var boundBem = bem.bind(null, "block");

var className = boundBem("element", { modifier: true });
// className === "block__element block__element--modifier"

bemStyles