BEM

What is BEM?

BEM is a naming convention for CSS. It stands for Block, Element, Modifier. Its purpose is to make CSS more readable and faster to render.

Examples

    <h3>List</h3>
    <ul class="list">
        <li class="list__item">Item 1</li>
        <li class="list__item">Item 2</li>
        <li class="list__item">Item 3</li>
    </ul>

    <hr>

    <h3>Avatar</h3>
    <div class="avatar">
        <img class="avatar__image" src="" alt="avatar">
        <div class="avatar__username">Hanna</div>
    </div>