BEM v2.1 w/Proxy

by js_test

HTML

<section>
  <article class="block__elem-one hello world"></article>
  <article class="block__elem-two"></article>
</section>

JavaScript

const BEM = namespace => ({
  block() {
    return namespace;
  },
  element(element) {
    return `${namespace}__${element}`;
  },
  modifier(modifier) {
    return `${namespace}--${modifier}`;
  }
})

const BEMv2 = namespace => new Proxy(BEM(namespace), {
  get(target, prop) {
    return classname => {
      const derivedName = target[prop](classname);
      return {
        classname: derivedName,
        collection: document.getElementsByClassName(derivedName),
      }
    };
  }
});

const {
  element,
  modifier
} = BEMv2('block')

const $elemOne = element('elem-one');
const $elemTwo = element('elem-two');

console.log($elemOne)
console.log($elemOne.classname)
console.log($elemOne.collection)
console.log($elemTwo)