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 :)
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)The @ symbol can be used to produce Block+Element classNames:
cx`@`
// -> Button
cx`@content`
// -> Button__content
cx`@content/text`
// -> Button__content__textYou 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--purpleWhen +@ 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--purpleIf 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--outlinedcss`
.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;
}