A utility class for managing BEM modifiers
npm install bem-modTo install
`` npm i bem-mod`
To use
` import bemMod from 'bem-mod'; `
#### Problem Statement
BEM class names can be lengthy for a significant amount of additional typing which is compouned when an element has multiple modifiers applied. This ESM module aims to reduce the
amount of duplicate code needed to juggle those modifiers.
Consider the case that a user selected a wider reading size for an article, but has also gone idle:
` _where Modifier is any of the following #### Example Usage for MODIFIER_HIDDEN #### Example Using client-side given modifier as a string literal An element with classname This ensures css-cascading is done in the order one would expect. Base-styling, overridden by modifiers, overridden by client-side styling.
``$3
bemMod(element: HTMLElement, modifier: string, add: boolean = true): void
bemMod.setModifier(element: HTMLElement): void
bemMod.unsetModifier(element: HTMLElement): void
bemMod.toggleModifier(element: HTMLElement): void
`
bemMod.setHidden(elmArticle); // Adds the hidden modifier
bemMod.setHidden(elmArticle, false); // Removes the hidden modifier
bemMod.unsetHidden(elmArticle); // Removes the hidden modifier
bemMod.toggleHidden(elmArticle); // Toggles the hidden modifier``
bemMod(elmArticle, '2x-wide'); // Adds a '2x-wide' modifier
bemMod(elmArticle, '2x-wide', false); // Removes the '2x-wide' modifiercalculator__1-button$3
As bemMod add or removes classes, it maintains the following order of classnames on the target element:
block__element, block__element--modifier-1, block__element--modifier-2, ..., followed by any other classes added by client code. and the modifier pressed and a client-side set class of btn will maintain the order:```
calculator__1-button calculator__1-button--pressed btn