bemmit
A small utility for quickly generating BEM-style naming for CSS classes.
Installation
npm install --save bemmit
Usage
var bemmit = require('bemmit');
var getClass = bemmit('my-block');
var myMarkup = `
<div class="${getClass()}">
<h1 class="${getClass('header')}">Choose Your Weapon</h1>
<ul class="${getClass('weapon-list')}">
<li class="${getClass('weapon', ['rubber-chicken'])}">
Rubber Chicken
</li>
<li class="${getClass('weapon', ['feather'])}">
Feather
</li>
<li class="${getClass('weapon', ['colorful-language'])}">
Colorful Language
</li>
</ul>
</div>
`;
This generates the following markup:
<div class="my-block">
<h1 class="my-block__header">Choose Your Weapon</h1>
<ul class="my-block__weapon-list">
<li class="my-block__weapon my-block__weapon--rubber-chicken">
Rubber Chicken
</li>
<li class="my-block__weapon my-block__weapon--feather">
Feather
</li>
<li class="my-block__weapon my-block__weapon--colorful-language">
Colorful Language
</li>
</ul>
</div>
API
bemmit(blockName)
Generates a function that will return BEM-style CSS classnames.
Parameters
blockName
— the name of the block. This is used as the base of the class name.
Return Value
- Function — a function that will generate CSS class names, with optional
element
and modifiers
parameters.
bemmit(blockName)([element][, [modifiers]])
Generates BEM-style CSS classname(s).
Parameters
element
(optional) — the element namemodifiers
(optional) — an array of modifiers for the class
Return Value
- String — the class or classes
Examples of Usage
var bemmit = require('bemmit');
var getClass = bemmit('photo');
getClass();
getClass(null, ['active', 'round']);
getClass('caption');
getClass('share', ['pinterest']);