57. БЭМ (Block Element Modifier)

## CSS: Стиль - Урок: БЭМ (Block Element Modifier)


![Иллюстрация к уроку](/lessons/css-bem.png)
БЭМ – это методология для разработки веб-интерфейсов, которая помогает создавать модульный и поддерживаемый CSS-код. Она делает ваш код более читаемым, предсказуемым и легко масштабируемым.

### Что такое БЭМ?

БЭМ расшифровывается как Block, Element, Modifier (Блок, Элемент, Модификатор).  Это способ именования CSS-классов, который отражает структуру вашего HTML и помогает избежать конфликтов стилей.

*   **Блок:** Независимый, повторно используемый компонент интерфейса.
*   **Элемент:** Часть блока, не имеющая самостоятельного значения вне блока.
*   **Модификатор:** Определяет состояние или вариант блока/элемента.

### Правила именования

БЭМ предлагает определенные правила именования классов:

*   `block`
*   `block__element`
*   `block--modifier`
*   `block__element--modifier`

### Примеры кода

Рассмотрим пример кнопки:

**HTML:**

```html
<button class="button button--primary">
  <span class="button__text">Кнопка</span>
</button>

CSS:

/* Блок: Кнопка */
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* Модификатор: Первичная кнопка */
.button--primary {
  background-color: blue;
  color: white;
}

/* Элемент: Текст кнопки */
.button__text {
  font-weight: bold;
}

Другой пример, форма поиска:

HTML:

<div class="search-form">
  <input type="text" class="search-form__input" placeholder="Поиск...">
  <button class="search-form__button">Найти</button>
</div>

CSS:

.search-form {
  display: flex;
  border: 1px solid #ccc;
  padding: 5px;
}

.search-form__input {
  border: none;
  flex-grow: 1;
  padding: 5px;
}

.search-form__button {
  background-color: #eee;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
}

Жизненный пример

Многие крупные веб-проекты и фреймворки используют принципы БЭМ. Например, Yandex (компания, разработавшая БЭМ) активно использует эту методологию во всех своих сервисах. Также, многие CSS-фреймворки, такие как Bootstrap, вдохновлены идеями модульности и именования, похожими на БЭМ. Встречается в больших SPA (Single Page Applications), где важна переиспользуемость и понятность компонентов.

Ключевые моменты

БЭМ помогает создавать модульный и поддерживаемый CSS.
Правила именования классов упрощают понимание структуры HTML и CSS.
БЭМ уменьшает вероятность конфликтов стилей.
БЭМ способствует переиспользованию компонентов.
БЭМ упрощает масштабирование проекта.

## Интерактивный пример

<Playground client:load
  template="static"
  files={{
    "/index.html": `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BEM Example</title>
  <style>
    body { background-color: #282c34; color: white; font-family: sans-serif; }
    .button { padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; }
    .button--primary { background-color: blue; color: white; }
    .button__text { font-weight: bold; }
  </style>
</head>
<body>
  <button class="button button--primary" onclick="alert('Clicked!')">
    <span class="button__text">Click Me</span>
  </button>
  <\/body>
</html>
`
  }}
/>