BEM Utils

Table of Contents

• Installation
• Getting Started
• classNames
• CSS

Installation

npm install bem-utils

bem-utils adds some sugar to writing out BEM-style classNames and CSS through the use of tagged template strings. BEM is great for your codebase, but it's hard to read and annoying to write. This module attempts to make both of the aforementioned actually kind of fun :)

Getting Started

Start by importing the module and setting the block for the classNames or cssText you want to generate. bem-utils has two main methods -- classNames(...) and css(...):

import BEM from 'bem-utils'
const BLOCK = 'Button'
let { classNames: cx, css } = BEM(BLOCK)

classNames

Basic

Blocks and Elements

The @ symbol can be used to produce Block+Element classNames:

cx`@`
// -> Button

cx`@content`
// -> Button__content

cx`@content/text`
// -> Button__content__text

Modifiers

You may include any number of comma-separated modifiers following a trailing whitespace:

cx`@ default`
// -> Button--default

cx`@ big, active`
// -> Button--big Button--active

cx`@content dark outlined`
// -> Button__content--dark--outlined

cx`@content/text large, purple`
// -> Button__content__text--large Button__content__text--purple

Advanced

Blocks and Elements

When +@ is used at the start of the classString, the block+element className will always be printed in addition to modifier classNames:

cx`+@ default`
// -> Button Button--default

cx`+@content dark outlined`
// -> Button__content Button__content--dark--outlined

cx`+@content/text large, purple`
// -> Button__content__text Button__content__text--large Button__content__text--purple

Modifiers

If the leading +@ or @ is omitted, modifiers will be applied to the block:

cx`default`
// -> Button--default

cx`big, active`
// -> Button--big Button--active

cx`big, active, dark outlined`
// -> Button--big Button--active Button--dark--outlined

CSS

css`

.default ${`
  color: #000;
`}

.default .content .icon.pink ${`
  color: #fff;
  background: pink;
  border-radius: 4px 8px;
`}

.default.big span .text:hover .purple ${`
  color: purple;
  text-align: center;
  text-decoration: none;
`}

`

The code above outputs the following css:

.Button--default {
  color: #000;
}

.Button--default .Button__content .Button__content__icon--pink {
  color: #fff;
  background: pink;
  border-radius: 4px 8px;
}

.Button--default--big span .Button__text:hover .Button__text__purple {
  color: purple;
  text-align: center;
  text-decoration: none;
}