jQuery BEM
Simple BEM integration in jQuery.
Installation
npm i --save-dev jquery-bem-utils
var $ = require('jquery');
require('jquery-bem-utils');Usage
Your BEM has to be in the style of block__element--modifier for this plugin to work.
Find Block
findBlock(elementName)$('body').findBlock('foo'); // => returns $('.foo--red--padding-large')<body>
<div class="foo--red--padding-large">
<div class="foo__bar"></div>
</div>
</body>Find Element
findElement(elementName)$('body').findBlock('foo').findElement('bar'); // => returns $('.foo__bar')<body>
<div class="foo--red--padding-large">
<div class="foo__bar"></div>
</div>
</body>Get Modifiers
$('body').findBlock('foo').getModifiers(); // => returns ['red', 'padding-large']<body>
<div class="foo--red--padding-large">
<div class="foo__bar"></div>
</div>
</body>Has Modifier
hasModifier(modifierName)$('body').findBlock('foo').hasModifier('red'); // => returns true
$('body').findBlock('foo').hasModifier('bar'); // => returns false<body>
<div class="foo--red--padding-large">
<div class="foo__bar--bar"></div>
<div class="foo__bar--bar"></div>
<div class="foo__bar--bar"></div>
</div>
</body>Set Modifier
addModifier(modifierName, unique)$('body').findBlock('foo').findElement('bar').addModifier('hello'); // => returns (1)
$('body').findBlock('foo').findElement('bar').filter(':nth-child(2)').addModifier('hello', true); // => returns (2)
$('body').findBlock('foo').findElement('bar').filter(':nth-child(3)').addModifier('hello', true); // => returns (3)(1)
<body>
<div class="foo--red--padding-large">
<div class="foo__bar--bye--hello"></div>
<div class="foo__bar--bye--hello"></div>
<div class="foo__bar--bye--hello"></div>
</div>
</body>(2)
<body>
<div class="foo--red--padding-large">
<div class="foo__bar--bye"></div>
<div class="foo__bar--bye--hello"></div>
<div class="foo__bar--bye"></div>
</div>
</body>(3)
<body>
<div class="foo--red--padding-large">
<div class="foo__bar--bye"></div>
<div class="foo__bar--bye"></div>
<div class="foo__bar--bye--hello"></div>
</div>
</body>