bemmit

bemmit

A small utility for quickly generating BEM-style naming for CSS classes.

Installation

# Install the package
npm install --save bemmit

Usage

var bemmit = require('bemmit');

// Create an instance of bemmit.
var getClass = bemmit('my-block');

// Now you can quickly add BEM-friendly classes to your HTML:
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 name
• modifiers (optional) — an array of modifiers for the class

Return Value

• String — the class or classes

Examples of Usage

// Load bemmit
var bemmit = require('bemmit');

// Create a block called 'photo'.
var getClass = bemmit('photo');

// Get the block classname.
getClass(); // -> photo

// Get the block classname with the modifiers 'active' and 'round'.
getClass(null, ['active', 'round']); // -> photo photo--active photo--round

// Get an element class for the caption
getClass('caption'); // -> photo__caption

// Get an element class for the share button with the modifier 'pinterest'.
getClass('share', ['pinterest']); // -> photo__share photo__share--pinterest