Cranberry / Vue BEM
Install
npm install @cran/vue.bemUsage
Note on modifiers
Modifiers may be a string, an object where falsy values are ignored and keys
represent the created modifiers, or an array (possibly deeply nested) of the
same content. The following are all valid, and for the rest of the readme,
you may assume any of the following can replace the string "modifiers"
const stringModifier = "modifier";
const objectModifier = {
modifier: true,
noModifier: false,
truthyValue: 1,
falsyValue: "",
};
const mixedModifier = [ stringModifier, objectModifier, ];TL;DR
All of the following are equivalent
bem(b, e, m);
b(b).em(e, m);
b(b).e(e).m(m);Primary
bem("block");
// > [ 'block' ]
bem("block", "element");
// > [ 'block__element' ]
bem("block", "element", "modifiers");
// > [ 'block__element', 'block__element--modifiers' ]Composition
const b = bem.b("block");
// > { em, m, e };
b.em();
// > [ 'block' ]
b.em("element");
// > [ 'block__element' ]
b.em(undefined, "modifiers");
// > [ 'block', 'block--modifiers' ]
b.m("modifiers");
// > [ 'block', 'block--modifiers' ]
const e = b.e("element");
// > { m }
e.m();
// > [ 'block__element' ]
e.m("modifiers");
// > [ 'block__element', 'block__element--modifiers' ]