Урок 45. Обзор урока: БЭМ: block__element--modifier

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

⚡ Кратко

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

О чём урок

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

Дальше курс перейдёт к типичным ошибкам, кроссбраузерности, валидации и оптимизации.

Ключевые понятия

  • BEM
  • block
  • element
  • modifier
  • block__element--modifier
  • component isolation
  • naming
  • good example
  • bad example

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Синтаксис и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что усложняло поддержку и чем заменить.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация