БЭМ помогает называть CSS-классы так, чтобы компонент был переносимым: block — самостоятельная сущность, element — часть блока, modifier — вариант состояния или вида. Формат: block__element--modifier.
Задания
Разбор имени. Для класса .profile-card__avatar--large назовите, где здесь
block, где element, где modifier, и какие разделители их отделяют.
Свой компонент. Сверстайте блок .profile-card с элементами
__avatar, __name, __button и модификатором блока --compact.
Модификатор состояния. Добавьте кнопке два варианта через модификатор элемента:
.profile-card__button--primary и .profile-card__button--disabled.
Ревью. Перепишите хрупкий селектор .sidebar .card a.featured в плоский БЭМ-класс.
Ожидаемый результат (задание 2)
Эскиз: блок .profile-card с элементами __avatar, __name, __button.