BlockEstimated reading time: 1 minute
A functionally independent page component that can be reused. In HTML, blocks are represented by the
block namedescribes 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
IDselectors when using BEM
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> </header>
Here header is block , logo is block and search-form is also a block .css, bem, ui, ux