Урок 45. Решения: БЭМ: block__element--modifier

📁 Раздел: Организация CSS ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#main

⚡ Кратко

БЭМ помогает называть CSS-классы так, чтобы компонент был переносимым: block — самостоятельная сущность, element — часть блока, modifier — вариант состояния или вида. Формат: block__element--modifier.

Разбор задания 1

В имени .profile-card__avatar--large: block — profile-card, element — avatar (после __), modifier — large (после --). Это модификатор элемента: меняет вид аватара, не блока целиком.

Решение задания 2–3: карточка профиля

Рабочий минимум: блок с элементами и модификаторами кнопки. Ниже — живой результат и код.

📄 lesson-45/solution.html
<article class="profile-card">
  <div class="profile-card__avatar"></div>
  <strong class="profile-card__name">Анна Иванова</strong>
  <a class="profile-card__button profile-card__button--primary" href="#">Подписаться</a>
  <a class="profile-card__button profile-card__button--disabled" href="#">В архиве</a>
</article>
📄 lesson-45/solution.css
.profile-card {
  display: grid;
  gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
}
.profile-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); }
.profile-card__name   { font-weight: 700; }
.profile-card__button { padding: .45rem .8rem; border-radius: .5rem; }
.profile-card__button--primary  { background: var(--color-accent); color: #fff; }
.profile-card__button--disabled { color: #94a3b8; cursor: not-allowed; }

Решение задания 4: переписанный селектор

Хрупкое .sidebar .card a.featured (специфичность 0,3,1) → плоский класс.

/* было */  .sidebar .card a.featured { /* … */ }
/* стало */ .profile-card__button--primary { /* … */ }

Навигация