Using BEM Classes

The BEM methodology was created at Yandex for developing websites that need to be built quickly and maintained for many years. It allows creating scalable and reusable interface components.

You can read more about the approach in the official documentation

In this article, we will look at how to implement this approach using built-in tools.

Basic Usage

To work with classes in Steroids, use the useBem hook imported from @steroidsjs/core/hooks.

As the only argument, it takes the name of the BEM block.

Block

To create a BEM block, use the block method of the useBem hook.

export default function NavBarTemplate() {
1    const bem = useBem('NavBarTemplate');
2
3    return (
4        <div className={bem.block()}> // will be replaced with NavBarTemplate
5            // Rest of the code
6        </div>
7    );
8}

Element

To create a BEM element, use the element method of the useBem hook.

Basic usage example:

export default function NavBarTemplate() {
1    const bem = useBem('NavBarTemplate');
2
3    return (
4        <div className={bem.block()}> // NavBarTemplate
5            <div className={bem.element('logo')}> // NavBarTemplate__logo
6                // Logo
7            </div>
8
9            <a href='#' className={bem.element('link')}> // NavBarTemplate__link
10                // Link to home
11            </a>
12
13            // Rest of the code
14        </div>
15    );
16}

BEM Block Modifier

To create a BEM block modifier, pass the modifier as an argument to the block method.

export default function CustomButton() {
1    const bem = useBem('CustomButton');
2
3    return (
4        <button className={bem.block('red')}> // CustomButton CustomButton_red
5            // Rest of the code
6        </button>
7    );
8}

Note that both the BEM block class and the BEM modifier class will be applied.

BEM Element Modifier

To create a BEM element modifier, pass the modifier as the second argument to the element method.

    <div className={bem.block()}> // NavBarTemplate
1        <div className={bem.element('logo', 'big')}> // NavBarTemplate__logo NavBarTemplate__logo_big
2            // Logo 
3        </div>
4    </div>

Multiple and Conditional Modifiers

An object can be used as a modifier, where the keys are the modifiers and the values are the conditions under which the modifiers will or will not be applied.

    <button 
1        className={bem.block({ // The block class will always be applied (e.g., CustomButton)
2            hidden: props.isHidden, // if props.isHidden === true, the CustomButton_hidden class will be applied
3        })}
4    > 
5        <span 
6            className={bem.element('content', { // The CustomButton__content class will always be applied
7                firstLine: true, // the CustomButton__content_firstLine class will always be applied
8                dark: theme === 'dark' // if theme === 'dark', the CustomButton__content__dark class will be applied
9            })}
10            > 
11                Submit form
12        </span>
13    </div>

The value in the modifier object can be not only boolean, but also string or number.

<div className={bem.element('buttons')}>
1    {['one', 'two', 'three'].map((value, index) => (
2        <div
3            key={index}
4            className={bem.element('button', {
5                number: index,
6            })}
7        >
8            {value}
9        </div>
10    ))}
11</div>
12
13// transforms into the markup:
14
15<div class="NavBar__buttons">
16    <div class="NavBar__button">one</div>
17    <div class="NavBar__button NavBar__button_number_1">two</div>
18    <div class="NavBar__button NavBar__button_number_2">three</div>
19</div>

Combining Classes

If you need to combine multiple classes on one element (for example, when you need to pass styles from the parent to a custom button component), you can pass the necessary classes.

// The result of calling the bem.element('home', 'active') function in the parent element is passed as additionalClassNames
1export default function CustomButton(props: {additionalClassNames: string}) {
2    const bem = useBem('CustomButton');
3
4    return (
5        <button className={bem(
6            bem.block(), 
7            props.additionalClassNames
8            )}> // CustomButton NavBarTemplate__home NavBarTemplate__home_active
9            // Rest of the code
10        </button>
11    );
12}

Summary

const bem = useBem('Block');
1
2bem.block(); // Block
3bem.block('modificator'); // Block Block_modificator
4bem.block({
5    modificator: false,
6    hidden: true,
7    button: 'one',
8}); // Block Block_hidden Block_button_one
9
10
11bem.element('Element'); // Block__Element
12bem.element('Element', 'modificator'); // Block__Element Block__Element_modificator
13bem.element('Element', {
14    modificator: true,
15    hidden: false,
16    button: 'two',
17}); // Block__Element Block__Element_modificator Block__Element_button_one
18
19bem(
20    bem.block(), 
21    bem.element('FirstElement'), 
22    bem.element('SecondElement', 'modificator'), 
23    'visuallyHidden'
24); // Block Block__FirstElement Block__SecondElement Block__SecondElement_modificator visuallyHidden