Sobre o jQuery.toggleModifier
TL&DR: O jQuery.toggleModifier é um plugin desenvolvido para o jQuery que facilita a vida de programadores que optam pelo uso da metodologia BEM para organizar seu CSS e por conta disso tem dificuldades com a manipulação dos modificadores que representam os status nas suas aplicações.
Quem já trabalhou com o BEM juntamente com a jQuery sabe que uma forma recorrente de se manipular modificadores no padrão do BEM com o jQuery é através do .toggleClass()
mas também deve reconhecer que essa abordagem não é muito elegante. Veja o exemplo adicionando um modificador ao elemento HTML <div class="block_element"></div>
:
.toggleClass('block__element--modifier');
Essa abordagem tem reflexos ruins no código. Escrevemos demais - o que nos interessa é apenas a parte final da classe, a que representa o nosso modificador - e nosso código JavaScript fica extremamente atrelado ao parentesco entre os elementos dentro do nosso bloco.
Pensando nisso tudo cheguei ao toggleModifier()
. Uma forma de adicionar e remover modificadores que leva em consideração as classes já existentes no elemento HTML manipulado pelo método. Esse approach me pareceu uma solução eficiente para abstrair a lógica necessária para a manipulação desses modificadores.
Utilização
Para adicionarmos ao elemento HTML <div class="block__element"></div>
o modificador --active
basta utilizarmos a seguinte instrução:
$('.block__element').toggleModifier('active');
Isso é o suficitente para remover/adicionar o modificador e ainda por cima o .toggleModifier()
permite que vários modificadores diferentes sejam manipulados no mesmo elemento.
Vá até o repositório no GitHub e conheça melhor a ferramenta.
comments powered by Disqus