Skip to content

Instantly share code, notes, and snippets.

@remi
Last active September 26, 2016 11:39
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 remi/1fc4fc2f3cf126867c908dde3ac6ac73 to your computer and use it in GitHub Desktop.
Save remi/1fc4fc2f3cf126867c908dde3ac6ac73 to your computer and use it in GitHub Desktop.
BEM-style class name builder
// @example
// build('foo', {bar: true, baz: false, omg: true});
// => 'foo foo--bar foo--omg'
const build = (base, modifiers = {}) => {
const reduceModifier = (memo, modifier) => {
return modifiers[modifier]
? memo.concat([`${base}--${modifier.replace(/([A-Z])/g, (part) => `-${part.toLowerCase()}`)}`])
: memo;
};
return Object.keys(modifiers).reduce(reduceModifier, [base]).join(' ');
};
export default {build};
import ClassNameBuilder from 'ClassNameBuilder';
ClassNameBuilder.build('component-name__sub-component-name', {
foo: true,
bar: false,
fromBaz: true
});
// => "component-name__sub-component-name component-name__sub-component-name--foo component-name__sub-component-name--from-baz"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment