Estimated reading time: 1 minute


A functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute

  • The block name describes its purpose (“What is it?” — menu or button), not its state (“What does it look like?” — red or big).
<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>

<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>
  • You shouldn’t use CSS tag or ID selectors when using BEM

Nested Block

You can use nested block .

<!-- `header` block -->
<header class="header">
    <!-- Nested `logo` block -->
    <div class="logo"></div>

    <!-- Nested `search-form` block -->
    <form class="search-form"></form>

Here header is block , logo is block and search-form is also a block .

css, bem, ui, ux