Урок 45. Старый vs Новый: БЭМ: block__element--modifier

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

⚡ Кратко

Раньше стиль вешали на положение элемента: .sidebar .card h2. Такой селектор ломается при переносе компонента и копит специфичность. БЭМ заменяет это плоскими классами — один класс на деталь, специфичность 0,1,0 у всех.

Проблема: вложенные контекстные селекторы

Стиль зависит от того, где лежит элемент. Перенесёшь карточку в другой контейнер — оформление пропадёт. К тому же длинная цепочка повышает специфичность, и её приходится «перебивать» ещё более длинной.

📄 lesson-45/old.css — было
.sidebar .card h2          { font-size: 24px; }      /* специфичность 0,2,1 */
.sidebar .card a           { color: white; background: blue; }
.main .card.featured h2    { color: blue; }          /* специфичность 0,3,1 */

Решение: плоские БЭМ-классы

Каждая деталь — свой класс. Стиль не зависит от родителя, специфичность одинаковая и низкая, компонент переносится куда угодно вместе со своими стилями.

📄 lesson-45/modern.css — стало
.course-card__title           { font-size: 1.5rem; }   /* специфичность 0,1,0 */
.course-card__button--primary { color: white; background: var(--color-accent); }
.course-card--featured .course-card__title { color: var(--color-accent); }

Видно глазами

Один и тот же компонент. Слева оформление держится только потому, что карточка лежит в .sidebar; справа — потому что у элементов есть свои БЭМ-классы.

контекст: .sidebar .card

Заголовок

класс: .course-card__title

Заголовок

<!-- было: зависит от .sidebar -->
<div class="sidebar"><article class="card"><h2>Заголовок</h2></article></div>

<!-- стало: класс несёт стиль сам -->
<article class="course-card"><h2 class="course-card__title">Заголовок</h2></article>

Навигация