projectLogo: assets/icon.svg

Bemm

Block__Element--Modifier Maker

Create BEM names from within your component.

Installation

npm install bemm

# or yarn
yarn add bemm

Setup

import { createBemm } from "bemm";

const bemm = createBemm("block");

render`
    <div class="${bemm()}">
        <div class="${bemm("inner")}></div>
    </div>
`;

<div class="block">
  <div class="block__inner"></div>
</div>

How

In order to use the function, you have to initiate the function with it's block class.

Create the function an set the the block

const bemm = createBemm("my-block-class");

Then you will be able to use the bemm function throughout your html to create the desired classes.

Arguments

On the initial createBemm function, there is only one argument, which is the string for the block.

The create bemm function, or whatever you want to call it, has two arguments:

interface bemmObject {
  element: string;
  modifier: string | string[];
}

[gist=2d9aff65094156a9f52f67594e8000d0]