jQuery.toggleModifier

jQuery extension to work easily with BEM modifiers.

Sometimes the BEM modifiers (when used to represents statuses) manipulation with JavaScript is very boring. We should write verbose classes to change elements status and this is bad.

This problem can be solved with jQuery.toggleModifier. Look this case:

<button class="block-name__element-name"></button>

To add a modifier (without jQuery.toggleModifier) we should evoke the .toggleClass() of jQuery. Something like this:

.toggleClass('block-name__element-name--modifier-name');

This is bad. If we add a new element in the hierarchy of the CSS component, this change should be reflected on our JavaScript 😱

But now, with jQuery.toggleModifier we can just evoke .toggleModifier():

.toggleModifier('modifier-name');

And have the same behavior.

You can also just add or remove a modifier like that:

.addModifier('modifier-name');
// or
.removeModifier('modifier-name');
// or
.hasModifier('modifier-name');

Install via npm

$ npm install jQuery.toggleModifier

Install via Bower

$ bower install jQuery.toggleModifier

Install via Asset-rails

Add in your Gemfile:

source 'https://rails-assets.org' do
  gem 'rails-assets-jQuery.toggleModifier'
end

Backlog

Allow manipulation of modifiers when the element represents two or more BEM elements.

npm