Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @dr/bem-helper with all npm packages installed. Try it out:

var bemHelper = require("@dr/bem-helper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@dr/bem-helper v1.2.4

Helper functions to create BEM-style classnames

bem-helper

Helper functions to create BEM-style classnames

Install


npm install @dr/bem-helper

Usage


var bem = require("@dr/bem-helper");

var className = bem("block", "element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
//                        ^^^^^^^^^^^^^^                   ^^^^^^^^^^^^^^^^^^^^^^^^
//                         _____/              _____________________/
//                        /                   /
// bem.scoped -> "block__element block__element--modifier"
//                               ^^^^^^^^^^^^^^^^^^^^^^^^
//                              ___________/
//                             /
// bem.single -> "block__element--modifier"

API

bem

A function that creates all applicable combinations of classnames for an element in BEM-style.

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 === "element block__element"

Elements with modifiers

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

Modifiers with values

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

Prebinding helpers

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

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

bem.scoped

Same as bem - but it returns a fully scoped classname.

Examples

Basic

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

Elements with modifiers

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

Modifiers with values

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

Prebinding helpers

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

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

bem.single

Same as bem - but it only returns a single classname.

Examples

Basic

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

Elements with modifiers

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

Modifiers with values

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

Prebinding helpers

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free