b3m
Easy af BEM formatter which uses the two-dashes-style
Install
npm
$ npm install b3m --save-dev
yarn
$ yarn add b3m --dev
Usage
Pass a string and it's a block, pass a array or object and it's a modifier.
const cn = // button // button__element // button__big button__blue // button--action button--disabled // button__element button--action // button--action button__element // button--is-clickable // button--hidden // button--has-icon // button--status-has-icon // button--icon-type-emoji // If you pass something empty it returns a empty string, e.g.
Example
React
import React from 'react'import b3m from 'b3m' const cn = buttonStatus = 'visible' iconModifiers = 'big-icon' <div => <button =></button> <div =></div> </div> // rendered: <div ="element"> <button ="element__button element--status-visible element--blue"></button> <div ="element__icon element--big-icon"></div></div>