https://github.com/maykinmedia/bem.js
DOM selection and manipulation using BEM (Block, Element, Modifier).
https://github.com/maykinmedia/bem.js
bem block dom element modifier
Last synced: 7 months ago
JSON representation
DOM selection and manipulation using BEM (Block, Element, Modifier).
- Host: GitHub
- URL: https://github.com/maykinmedia/bem.js
- Owner: maykinmedia
- License: mit
- Created: 2016-08-19T08:13:39.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-26T11:38:45.000Z (over 6 years ago)
- Last Synced: 2025-04-20T11:12:48.856Z (7 months ago)
- Topics: bem, block, dom, element, modifier
- Language: JavaScript
- Size: 87.9 KB
- Stars: 9
- Watchers: 15
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/maykinmedia/bem.js)
[](https://coveralls.io/github/maykinmedia/bem.js?branch=master)
[](https://codeclimate.com/github/maykinmedia/bem.js)
[](https://lintly.com/gh/maykinmedia/bem.js/)
[](https://nodei.co/npm/bem.js/)
[](https://saucelabs.com/u/bemjs)
# bem.js
> DOM selection and manipulation using BEM (Block, Element, Modifier).
## Install
Install with [npm](https://www.npmjs.com/)
```sh
$ npm i bem.js --save
```
## Usage
*Code examples in es6, library is es5 compatible.*
*See [doc](doc/) for full API documentation.*
**Selecting an element**
```js
import BEM from 'bem.js';
// Returns HTMLElement matching .block
BEM.getBEMNode('block');
// Returns HTMLElement matching .block--modifier
BEM.getBEMNode('block', false, 'modifier');
// Returns HTMLElement matching .block__element
BEM.getBEMNode('block', 'element');
// Returns HTMLElement matching .block__element--modifier
BEM.getBEMNode('block', 'element', 'modifier');
// Returns NodeList with HTMLElements matching .block__element--modifier
BEM.getBEMNodes('block', 'element', 'modifier');
// Returns HTMLElement matching .block__element--modifier, child of node
BEM.getChildBEMNode(node, 'block', 'element', 'modifier');
// Returns NodeList with HTMLElements matching .block__element--modifier, children of node
BEM.getChildBEMNodes(node, 'block', 'element', 'modifier');
```
**Building BEM class names**
```js
import BEM from 'bem.js';
// Returns '.block'
BEM.getBEMSelector('block');
// Returns '.block.block--modifier'
BEM.getBEMSelector('block', false, 'modifier');
// Returns '.block__element'
BEM.getBEMSelector('block', 'element');
// Returns '.block__element.block__element--modifier'
BEM.getBEMSelector('block', 'element', 'modifier');
// Returns 'block'
BEM.getBEMClassName('block');
// Returns 'block--modifier'
BEM.getBEMClassName('block', false, 'modifier');
// Returns 'block__element'
BEM.getBEMClassName('block', 'element');
// Returns 'block__element--modifier'
BEM.getBEMClassName('block', 'element', 'modifier');
```
**Adding/removing modifiers**
```js
import BEM from 'bem.js';
// Adding a modifier
let node = BEM.getBEMClassName('foo');
BEM.addModifier(node, 'bar'); // node.className is now 'foo foo--bar'
// Adding an additional modifier
BEM.addModifier(node, 'baz'); // node.className is now 'foo foo--bar foo--baz'
// Removing a modifier
BEM.removeModifier(node, 'bar'); // node.className is now 'foo foo--baz'
// Toggle a modifier
BEM.toggleModifier(node, 'bar');
// Add/remove modifier based on expression
BEM.toggleModifier(node, 'bar', exp); // If exp is true, add, remove otherwise
BEM.addModifier(node, 'bar', exp); // Only add if exp is true
BEM.removeModifier(node, 'bar'); // Only remove if exp is true
```
**Check if HTMLElement has a modifier**
```js
import BEM from 'bem.js';
let node = BEM.getBEMNode('foo'); //
BEM.hasModifier(node, 'bar') // true
BEM.hasModifier(node, 'baz') // false
let node = BEM.getBEMNode('foo'); //
BEM.hasModifier(node, 'bar') // false
```
## Running tests
```sh
$ gulp build // Make sure you test against the latest build
$ gulp lint // Check for linting errors
$ gulp test // Run the tests
```
## Contributing
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/maykinmedia/bem.js/issues).
## Author
**Maykin Media**
* [maykinmedia.nl](https://www.maykinmedia.nl/)
* [github/maykinmedia](https://github.com/maykinmedia)
* [twitter/maykinmedia](http://twitter.com/maykinmedia)
## License
Copyright © 2016 [Maykin Media](https://www.maykinmedia.nl/)
Licensed under the MIT license.