Simple BEM integration in jQuery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Code Climate

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>