Skip to content

Instantly share code, notes, and snippets.

@firflant
Last active October 23, 2017 21:02
Show Gist options
  • Save firflant/1278fe5b2deaaafa5f65ac261923d723 to your computer and use it in GitHub Desktop.
Save firflant/1278fe5b2deaaafa5f65ac261923d723 to your computer and use it in GitHub Desktop.
BEM naming convention helper for React Components
// Helper function to generate String of class names for a block in BEM naming
// convention. Enter a block name (string) and modifiers (array) to return a
// string with block name class and all modifier classes.
export default function bemHelper(block, modifiers) {
if (modifiers) {
const classesArray = modifiers.map(modifier => `${block}--${modifier}`);
const classes = classesArray.join(' ');
return `${block} ${classes}`;
} else {
return block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment