<div class="popup popup_A">
<div class="popup__container">
<div class="popup__header">
<div>Знакомства</div>
<div class="popup__close">x</div>
</div>
<div class="popup__content enabled-notification">
<div class="enabled-notification__title">Включить уведомления</div>
<div class="notification">
<div>
<div class="notification__title">Новое сообщение</div>
<div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
</div>
<div class="notification__icon">
<svg xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>
<div class="enabled-notification__text">
Вы разрешаете нам отправлять уведомления о новых сообщениях, комментариях на ваши заметки и т.д.?
</div>
</div>
<div class="popup__footer popup_A__footer">
<button class="btn btn_color_grey popup_A__btn">Нет, спасибо</button>
<div class="divider"></div>
<button class="btn btn_color_blue popup_A__btn">Включить</button>
</div>
</div>
</div>
Блок "popup" ре-используемый, может содержать различный контент. Блок "enabled-notification" уникальный и не будет ре-использоваться. Блок "notification" ре-используемый, может содержать различный контент, в рамках определённых элементов.
Для модификации кнопок (нужно было сделать ширину в 50%), используем микс с модификатором popup_A. В обычном состоянии у "popup" есть только одна кнопка.
.popup_A__footer{
display: flex;
justify-content: space-between;
}
.popup_A__btn{
width: 50%;
}
Ещё есть вопрос по использованию "пустых" тегов-элементов (без классов), допустимо ли это?
<div class="notification">
<div>
<div class="notification__title">Новое сообщение</div>
<div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
</div>
<div class="notification__icon">
<svg xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>