nbem

nbem is for intuitively write the class name of BEM method.

Installation

npm i nbem

Usage

Use with node.js, browserify, webpack:

var nbem = require(nbem);
var bem = nbem();

'&' is indicates the nests.

bem('header'); // => "header"
bem('&nav'); // => "header__nav"
bem('&&item'); // => "header__nav__item"

':' is indicates the modifier.

bem('header:global'); // => "header--global"
bem('&nav'); // => "header--global__nav"

Join classnames:

Add a string or string[] at second argument.

bem('header'); // => "header"
bem('&nav', 'isActive'); // => "header__nav isActive"
bem('&nav', ['isActive', 'isHover']); // => "header__nav isActive isHover"
bem('&&item'); // => "header__nav__item"

Customize separator:

var config = require(nbem).config;
config.setSeparator('-', '_'); // element, modifier

bem('header:global'); // => "header-global"
bem('&title') // => "header-global_title"

Example

in React of ES6

import React from 'react';
import nbem from 'nbem';

export default class Header extends React.Component {
  render() {
    const bem = nbem();
    return (
      <header className={bem('header')}>
        <h1 className={bem('&title')}>Title</h1>
        <p className={bem('&description')>Description</p>
      </header>
    );
  }
}

Render:

<header class="header">
  <h1 class="header__title">Title</h1>
  <p class="header__description">Description</p>
</header>