❤
npm
Sign UpSign In

bem-utils

0.4.1 • Public • Published

npm version build status dependency status devdependency status Coverage Status

BEM Utils

Table of Contents

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;
}

Readme

Keywords

Package Sidebar

Install

npm i bem-utils

Repository

github.com/jozanza/bem-utils

Homepage

github.com/jozanza/bem-utils

Weekly Downloads

28

Version

0.4.1

License

MIT

Last publish

Collaborators

  • josiahsavary
  • jozanza
Try on RunKit
Report malware