💎 nbem is for intuitively write the class name of BEM method. React and others.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.eslintrc
.flowconfig
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

nbem

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

NPM version NPM downloads Build Status Dependency Status DevDependency Status License

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>