bem-mod - npm explorer

$3

To 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:


$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
_where Modifier is any of the following

    Collapsed

    Expanded

    Invisible

    Shown

    Hidden

    Enabled

    Disabled

    Selected

    Invalid

    Focused

    Animating

    ... more to come as needed

#### Example Usage for MODIFIER_HIDDEN`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`

#### Example Using client-side given modifier as a string literal`bemMod(elmArticle, '2x-wide'); // Adds a '2x-wide' modifier bemMod(elmArticle, '2x-wide', false); // Removes the '2x-wide' modifier`

`$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.

An element with classname calculator__1-button and the modifier pressed and a client-side set class of btnwill maintain the order:`calculator__1-button calculator__1-button--pressed btn``

This ensures css-cascading is done in the order one would expect. Base-styling, overridden by modifiers, overridden by client-side styling.