npm

Need private packages and team management tools?Check out npm Orgs. »

@dr/bem-helper

1.2.4 • Public • Published

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"
 

install

npm i @dr/bem-helper

Downloadsweekly downloads

132

version

1.2.4

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability