A tiny tool for easily building BEM class names in JavaScript.
const disabled = true;
const isOn = false;
const className = bembam("block", "other-name") // block name and any additional class names
.mod("green") // unconditional modifier
.mod("disabled", disabled) // conditional modifier
.mod("on", "off", isOn); // conditional modifier with disabled class name
const elName = className.el("element"); // block__element
className.toString(); // returns "block other-name block--green block--off"
With React:
class Zoo extends React.Component {
render() {
const {disabled, open, className} = this.props;
const cn = bembam("zoo", className)
.mod("disabled", disabled)
.mod("open", open)
.mod("awesome");
return (
<div className={cn.toString()}>
<button className={cn.el("dog")}>Woof!</button>
<button className={cn.el("cat")}>Meow</button>
</div>
);
}
}
Creates a bembam
instance. Takes the blockname and any number of additional classnames. Falsy classnames will be ignored.
Adds the modifier name to the bembam
instance if conditional
is either not defined or truthy. The modifier will be rendered as blockName--modifierName
in the result string. If three arguments are passed, the final argument is the conditional and the second argument is used as the modifier name if the condition is falsy. Falsy modifier names will be ignored. Returns the original BemBam
instance for chaining.
Returns an element string based on the block name and passed element name. The return value will have the format: blockName__elementName
. Falsy element names will throw errors.
Renders the class names and modifiers into a single class string with classnames seperated by spaces.