BEM v2.0 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) {
    const targetFn = target[prop];
    return classname => document.getElementsByClassName(targetFn(classname));
  }
});

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.classList)
console.log($elemTwo)