bem.elementModifier()

Overloads

• bem.elementModifier(blockName, elementName, modifier)
• bem.elementModifier(blockName, elementName, modifierName, modifierValue)
• bem.elementModifier(blockName, elementName, modifiers)

bem.elementModifier(blockName, elementName, modifier)

Version added: 1.0.0

Summary

Creates a CSS class of the element's modifier.

Returns

A CSS class of the element's modifier.

Type: String

Parameters

blockName

The name of the block.

Type: String

elementName

The name of the element.

Type: String

modifier

One or more modifiers, separated by a space.

Type: String

Examples

Creates a CSS class of the element's modifier using the name of the block, the name of the element and a string of modifiers:

Code:

var elementModifierCssClass = bem.elementModifier(
    'product',
    'name',
    'is-selected is-focused size_xs'
);

Result:

'product__name_is-selected product__name_is-focused product__name_size_xs'

bem.elementModifier(blockName, elementName, modifierName, modifierValue)

Version added: 1.0.0

Summary

Creates a CSS class of the element's modifier.

Returns

A CSS class of the element's modifier.

Type: String

Parameters

blockName

The name of the block.

Type: String

elementName

The name of the element.

Type: String

modifierName

The name of the modifier.

Type: String

modifierValue

The value of the modifier.

Type: String

Examples

Creates a CSS class of the element's modifier using the name of the block, the name of the element, the name of the modifier and the value of the modifier:

Code:

var elementModifierCssClass = bem.elementModifier('product', 'name', 'size', 'xs');

Result:

'product__name_size_xs'

bem.elementModifier(blockName, elementName, modifiers)

Version added: 1.0.0

Summary

Creates a CSS class of the element's modifier.

Returns

A CSS class of the element's modifier.

Type: String

##Parameters blockName

The name of the block.

Type: String

elementName

The name of the element.

Type: String

modifiers

A list of modifiers.

Type: Array

Examples

Creates a CSS class of the element's modifier using the name of the block, the name of the element and a list of modifiers:

Code:

var elementModifierCssClass = bem.elementModifier(
    'product',
    'name',
    [{ name: 'is-selected' }, { name: 'is-focused' }, { name: 'size', value: 'xs' }]
);

Result:

'product__name_is-selected product__name_is-focused product__name_size_xs'