Skip to content

Instantly share code, notes, and snippets.

@steve-taylor
Created June 2, 2017 08:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save steve-taylor/211a0a514f5517bb6869cb22e0295d93 to your computer and use it in GitHub Desktop.
Save steve-taylor/211a0a514f5517bb6869cb22e0295d93 to your computer and use it in GitHub Desktop.
/**
* <p>Create a function that can generate BEM classes based on the specified block.</p>
* <p>Suppose you have the following code:</p>
* <pre>
* const bem = bemFor('my-block');
* </pre>
* Then:
* <ul>
* <li><code>bem()</code> will return <code>"my-block"</code></li>
* <li><code>bem('my-element')</code> will return <code>"my-block__my-element"</code></li>
* <li><code>bem('my-element', 'my-modifier')</code> will return <code>"my-block__my-element my-block__my-element--my-modifier"</code></li>
* <li><code>bem(null, 'my-modifier')</code> will return <code>"my-block my-block--my-modifier"</code></li>
* </ul>
*
* @param {string} block the B in BEM
*/
const bemFor = (block) =>
(element, modifier) =>
element && modifier ?
`${block}__${element} ${block}__${element}--${modifier}` :
element ?
`${block}__${element}` :
modifier ?
`${block} ${block}--${modifier}` :
block;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment