https://github.com/vitkarpov/bem_
An easy way to build BEM-like classes with amusing chain interface
https://github.com/vitkarpov/bem_
Last synced: about 1 month ago
JSON representation
An easy way to build BEM-like classes with amusing chain interface
- Host: GitHub
- URL: https://github.com/vitkarpov/bem_
- Owner: vitkarpov
- License: mit
- Created: 2016-05-24T17:26:54.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-12T07:59:31.000Z (over 8 years ago)
- Last Synced: 2025-02-28T03:41:17.386Z (2 months ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# BEM Classname
[](http://badge.fury.io/js/bem_)
**An easy way to build BEM-like classes with amusing chain interface.**
```js
const BEMClassName = require('bem_');
// b has e (element) and m (modifier) methods
// which are chainable.
// To return the actual classname you should cast the instance to String
const b = new BEMClassName('block');
// block
String(b);
// block__button
String(b.e('button'));
// block block_red
String(b.m('red'));
// block__button block__button_red
String(b.e('button').m('red'))
// block__button block__button_red block__aside
String(b.e('button').m('red').e('aside'))
// block__button_color_red
String(b.e('button').m('color', 'red'));
```
With custom delimiters
```js
const BEMClassName = require('bem_');
const b = new BEMClassName('block', {
ELEMENT_DELIMITER: '-',
MODIFIER_DELIMITER: '--'
});
// block-button block-button--red block-aside
String(b.e('button').m('red').e('aside'))
```
You can make **chains of any length** to build several classes:
```js
const BEMClassName = require('bem_');
const b = new BEMClassName('block');
// block__foo block__bar block__bar_red block__baz
b.e('foo').e('bar').m('red').e('baz')
```
You can concat **optional classes to chain**:
```js
const BEMClassName = require('bem_');
const b = new BEMClassName('block');
// block__foo block__bar block__bar_red block__baz block__baz_green custom-class or string of classes
b.e('foo').e('bar').m('red').e('baz').concat('custom-class').concat('or string of classes').m('green')
```
## React Mixin
Mixin adds `b` to component\`s prototype. It's a link to the new instance created for the displayName of the component.
> **NOTE**: You should define displayName
```js
const bemifyClassName = require('bem_/react-mixin');
React.createClass({
displayName: 'button',
mixins: [bemifyClassName],
render() {
return (
{this.props.text}
);
}
})
```
> **NOTE**: React casts the object to String during build the classname for actual DOM
It's convenient to add or skip some modifiers according to props:
```js
React.createClass({
displayName: 'button',
render() {
return (
);
}
})
```
You can use `b` as a function, if you need to constuct an arbitrary block`s name. It creates a new chain.
```js
React.createClass({
displayName: 'button',
render() {
return (
);
}
})
```
## Install
```sh
$ npm install bem_
```
## Similar projects
I've been finding similar projects, check out some of them:
- https://www.npmjs.com/package/b_
- https://www.npmjs.com/package/bem-classnames
- https://www.npmjs.com/package/bem-classname
I found the chain interface more brief and convenient.