@dr/bem-helper

2.0.0-alpha-4 • Public • Published

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

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

Readme

Keywords

Package Sidebar

Install

npm i @dr/bem-helper

Weekly Downloads

838

Version

2.0.0-alpha-4

License

ISC

Unpacked Size

7.26 kB

Total Files

6

Last publish

Collaborators

  • vitradr
  • dr-thca
  • chnl-dr
  • drdkcisc
  • cluc
  • mlym-dr
  • thep-dr
  • mabdesaken
  • davpdrdk
  • nicolainyboe
  • dr_devops
  • sophus
  • jenslykkebrandt
  • aebadr
  • drexjakobskov
  • danniolsen2
  • mikkel_dr
  • kianandersson
  • wispheren
  • faldt
  • runi
  • drexkrha
  • drwebomraadet
  • jase
  • ojoo
  • fritzstoltze
  • graulund
  • pawa
  • pefr
  • sids
  • drexlofl
  • joth
  • jorgeneske
  • drdkazure
  • drdkbld
  • teamplay-npm
  • mkkr
  • drdknetgroup
  • drexsrau
  • mil0209
  • clausbruun
  • mzdk
  • drdk-knan
  • nele
  • jper
  • langeland
  • ldla
  • jtheyday
  • drntmediasmiths
  • casper.glumsoe
  • csolsen
  • bobend
  • chap-dr
  • phloe
  • themitvp
  • rasmusthirslund
  • kaaresylow
  • nael
  • pebo
  • jonashalgren
  • emrahsifoglu
  • i.delova
  • jpacdrdk
  • dr-crsa
  • ilko_enetpulse
  • illia_shevchenko
  • elsassph