https://github.com/drdk/bem-helper
Helper functions for creating BEM-style classnames
https://github.com/drdk/bem-helper
bem bem-helper bem-style classname
Last synced: 5 months ago
JSON representation
Helper functions for creating BEM-style classnames
- Host: GitHub
- URL: https://github.com/drdk/bem-helper
- Owner: drdk
- Created: 2016-11-11T10:27:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2026-01-05T14:16:31.000Z (6 months ago)
- Last Synced: 2026-01-08T21:17:14.058Z (6 months ago)
- Topics: bem, bem-helper, bem-style, classname
- Language: JavaScript
- Homepage:
- Size: 337 KB
- Stars: 0
- Watchers: 14
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# bem-helper
> Helper functions to create [BEM](https://en.bem.info/methodology/naming-convention/#two-dashes-style)-style classnames
## Install
```
npm install @dr/bem-helper
```
## Usage
```js
var bem = require("@dr/bem-helper");
var className = bem("block", "element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
// ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^
// _____/ _____________________/
// / /
// bem.scoped -> "block__element block__element--modifier"
// ^^^^^^^^^^^^^^^^^^^^^^^^
// ___________/
// /
// bem.single -> "block__element--modifier"
```
## API
* [bem](#bem)
* [bem.scoped](#bemscoped)
* [bem.single](#bemsingle)
### bem
A function that creates all applicable combinations of classnames for an element in BEM-style.
#### Arguments
* `block` (string) - The block element for the classname.
* `...args` (string|object) - Optional. Any number of the following arguments are allowed:
* `element` (string) - Optional.
* `modifier` (object) - Optional. Keys are used for modifier names. Values determine whether to turn the modifier off (`false`, `""`, `null` or `undefined`) or on - either through `true` or a value which will be appended to the modifier name; `{modifier: true}` -> `"--modifier"`, `{modifier: "value"}` -> `"--modifier-value"`. Should not follow a previous modifier argument.
#### Examples
###### Basic
```js
var className = bem("block", "element");
// className === "element block__element"
```
###### Elements with modifiers
```js
var className = bem("block", "element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
```
###### Modifiers with values
```js
var className = bem("block", "element", { modifier: "value", modifier2: false });
// className === "element block__element element--modifier-value block__element--modifier-value"
```
###### Prebinding helpers
```js
var boundBem = bem.bind(null, "block");
var className = boundBem("element", { modifier: true });
// className === "element block__element element--modifier block__element--modifier"
```
### bem.scoped
Same as [bem](#bem) - but it returns a fully scoped classname.
#### Examples
###### Basic
```js
var className = bem.scoped("block", "element");
// className === "block__element"
```
###### Elements with modifiers
```js
var className = bem.scoped("block", { modifier: true });
// className === "block block--modifier"
```
###### Modifiers with values
```js
var className = bem.scoped("block", "element", { modifier: "value", modifier2: false });
// className === "block__element block__element--modifier-value"
```
###### Prebinding helpers
```js
var boundScoped = bem.scoped.bind(null, "block");
var className = boundScoped("element", { modifier: true });
// className === "block__element block__element--modifier"
```
### bem.single
Same as [bem](#bem) - but it only returns a single classname.
#### Examples
###### Basic
```js
var className = bem.single("block", "element");
// className === "block__element"
```
###### Elements with modifiers
```js
var className = bem.single("block", "element", { modifier: true });
// className === "block__element--modifier"
```
###### Modifiers with values
```js
var className = bem.single("block", "element", { modifier: "value" });
// className === "block__element--modifier-value"
```
###### Prebinding helpers
```js
var boundSingle = bem.single.bind(null, "block");
var className = boundSingle("element", { modifier: true });
// className === "block__element--modifier"
```