Add/Remove BEM Modifier with classList

classList.bem.js

DOMTokenList.prototype.getFullModifierClassName = function (modifier) {
  if (this.length === 0) {
    return '';
  }
  return this.item(0) + '--' + modifier;
};

DOMTokenList.prototype.addModifier = function (modifier) {
  this.add(this.getFullModifierClassName(modifier));
};

DOMTokenList.prototype.removeModifier = function (modifier) {
  this.remove(this.getFullModifierClassName(modifier));
};

DOMTokenList.prototype.toggleModifier = function (modifier, forceValue) {
  const fullModifierClassName = this.getFullModifierClassName(modifier);
  if (forceValue === undefined) {
    this.toggle(fullModifierClassName);
  } else if (forceValue) {
    this.add(fullModifierClassName);
  } else {
    this.remove(fullModifierClassName);
  }
};

usage.js

const element = document.querySelector('.my-block__element');
element.classList.addModifier('funky'); // -> adds the class .my-block__element--funky

// It is assumed that the first class of the element is its block or element name.
// E.g.
// <div class="my-block__element some other classes">
// The first class "my-block__element" will be used to create the modifier class.

Great snippet, thanks for sharing!

Here is the method for checking if element already has a BEM modifier:

DOMTokenList.prototype.hasModifier = function (modifier) {
    return this.contains(this.getFullModifierClassName(modifier));
};