Can you explain the concept of BEM class naming method and its main components?

BEM (Block, Element, Modifier) is a methodology for naming CSS classes that helps create a clear and maintainable style structure.

Main components:

• Block — an independent component of the interface, e.g., menu or button. Example: menu.
• Element — a part of a block that cannot exist separately, e.g., a menu item. Denoted with double underscores: menu__item.
• Modifier — a state or variant of a block or element, e.g., an active menu item. Denoted with double hyphens: menu__item--active.

Example:

<div class="menu">
  <a class="menu__item menu__item--active" href="#">Home</a>
  <a class="menu__item" href="#">Contacts</a>
</div>

This approach makes it easier to understand the structure and reuse styles.