bem.block()

Overloads

• bem.block(blockName, modifier)
• bem.block(blockName, modifier, cssClass)
• bem.block(blockName, modifiers)
• bem.block(blockName, modifiers, cssClasses)

bem.block(blockName, modifier)

Version added: 1.0.0

Summary

Creates a CSS class of the block.

Returns

A CSS class of the block.

Type: String

Parameters

blockName

The name of the block.

Type: String

modifier

One or more modifiers, separated by a space.

Type: String

Examples

Creates a CSS class of the block using the name of the block and a string of modifiers:

Code:

var blockCssClass = bem.block('product', 'is-selected is-focused size_xs');

Result:

'product product_is-selected product_is-focused product_size_xs'

bem.block(blockName, modifier, cssClass)

Version added: 1.0.0

Summary

Creates a CSS class of the block.

Returns

A CSS class of the block.

Type: String

Parameters

blockName

The name of the block.

Type: String

modifier

One or more modifiers, separated by a space.

Type: String

cssClass

One or more additional CSS classes, separated by a space.

Type: String

Examples

Creates a CSS class of the block using the name of the block, a string of modifiers and a string of CSS classes:

Code:

var blockCssClass = bem.block('product', 'is-selected is-focused size_xs', 'clearfix');

Result:

'product product_is-selected product_is-focused product_size_xs clearfix'

bem.block(blockName, modifiers)

Version added: 1.0.0

Summary

Creates a CSS class of the block.

Returns

A CSS class of the block.

Type: String

Parameters

blockName

The name of the block.

Type: String

modifiers

A list of modifiers.

Type: Array

Examples

Creates a CSS class of the block using the name of the block and a list of modifiers:

Code:

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

Result:

'product product_is-selected product_is-focused product_size_xs'

bem.block(blockName, modifiers, cssClasses)

Version added: 1.0.0

Summary

Creates a CSS class of the block.

Returns

A CSS class of the block.

Type: String

Parameters

blockName

The name of the block.

Type: String

modifiers

A list of modifiers.

Type: Array

cssClasses

A list of CSS classes.

Type: Array

Examples

Creates a CSS class of the block using the name of the block, a list of modifiers and a list of CSS classes:

Code:

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

Result:

'product product_is-selected product_is-focused product_size_xs clearfix'