@mukhindev/create-bem
v1.0.3
Published
Utility for creating BEM class names. CSS Modules support
Downloads
390
Maintainers
Readme
Create BEM
Utility for creating BEM class names. CSS Modules support.
BEM
Block, Element, Modifier
Elements is a child of Block. Modifiers refer of to Block or Element.
block-name
__element-name
_modifier-name
or _modifier-key
_modifier-value
mix-name
<label class="input">
<span class="input__label"></span>
<input class="input__field input__field_disabled input__field_size_large" />
</label>
CSS
import { createBem } from "@mukhindev/create-bem";
// BEM-block (function)
const bem = createBem("input");
bem(element
, modifier(s)
, mix(es)
) return class names in BEM-style:
bem(); // input
bem("label"); // input__label
bem("label", "active"); // input__label input__label_active
bem("label", ["active", "large"]); // input__label input__label_active input__label_large
bem("label", { color: "red", large: false, active: true }); // input__label input__label_color_red input__label_active
bem("", { color: "red", large: false, active: true }); // input input_color_red input_active
bem("", "", "main-page"); // input main-page
bem("label", { color: "red" }, "main-page"); // input__label input__label_color_red main-page
CSS Modules
The second argument to createBem
is the object created by the CSS module:
import { createBem } from "@mukhindev/create-bem";
import classes from "./style.module.css";
const bem = createBem("input", classes);
bem("label", "active"); // _input__label_{hash} _input__label_active_{hash}
If the css selector is undefined or empty, CSS modules ignore class generation. Utility createBem
also ignores this selector:
bem("message", "", "mix"); // "mix"
If you find problems, check how your CSS selectors are hashed. Hashed names should be converted like this:
input -> _input_{hash}
input__label -> _input__label_{hash}
Options
Often the modifier is separated by --
. The third argument to createBem
is options:
const bem = createBem("input", undefined, { modifierKeyDivider: "--" });
Default options:
↓
elementDivider: "__" // input__field_size_large
↓ ↓
modifierKeyDivider: "_" // input__field_size_large or input__field_active
↓
modifierValueDivider: "_" // input__field_size_large