- BEM (Block Element Modifier) is simply a coding convention that is used by developers to organize names of selectors (especially for using CSS).
- Naming with BEM conventions give a semantic meaning to each selector which has its own functionality within the code base.
- This is useful when doing a project or a code review with other who may have not seen your code before. By applying BEM naming conventions in code, people can quickly look at your code and know the functionality of each code without the need of an explanation.
- Developers today use BEM conventions all the time as it makes group projects and code reviews more efficient and less time-consuming.
// Good
---
<div class="header">
<div class="header__title">My Code</div>
<p class="header__text">Hello!</p>
</div>
// Bad
---
<div class="header">
<div class="header__1">My Code</div>
<p class="header__2">Hello!</p>
</div>