nbem is for intuitively write the class name of BEM method. React and others.
MIT License
nbem is for intuitively write the class name of BEM method.
npm i nbem
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"
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"
var config = require(nbem).config;
config.setSeparator('-', '_'); // element, modifier
bem('header:global'); // => "header-global"
bem('&title') // => "header-global_title"
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>