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:
To add a modifier (without jQuery.toggleModifier) we should evoke the .toggleClass()
of jQuery. Something like this:
;
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()
:
;
And have the same behavior.
You can also just add or remove a modifier like that:
;// or;// or;
npm
Install via$ npm install jQuery.toggleModifier
Bower
Install via$ bower install jQuery.toggleModifier
Asset-rails
Install viaAdd in your Gemfile:
source 'https://rails-assets.org' do end
Backlog
- Allow manipulation of modifiers when the element represents two or more BEM elements.