В шаблонизаторе: Как динамически задавать CSS-класс и цвет элемента (например, кнопки «лайк») на основе состояния сервера в базе данных?

Динамическое управление CSS-классами и стилями элементов на основе серверного состояния — стандартная задача при разработке интерактивных интерфейсов. Рассмотрим её решение на примере кнопки «лайк», состояние которой (поставил пользователь лайк или нет) хранится в базе данных.

## Общий принцип

Сервер при формировании страницы делает запрос к БД и передаёт в шаблон переменную, отражающую состояние — например, `is_liked` (булево значение). Шаблонизатор использует эту переменную для условного применения CSS-класса.

## Пример на Jinja2 (Python / Flask / Django)

html

❤ Лайк

В контроллере:
python
is_liked = db.query(«SELECT 1 FROM likes WHERE user_id=? AND post_id=?», user_id, post_id)
return render_template(‘post.html’, is_liked=bool(is_liked))

## Пример на Blade (Laravel / PHP)

html

❤ Лайк

В контроллере:
php
$isLiked = Like::where(‘user_id’, auth()->id())->where(‘post_id’, $post->id)->exists();
return view(‘post’, compact(‘isLiked’));

## Пример на Twig (Symfony / PHP)

html

❤ Лайк

## CSS для состояний

css
.btn-like {
background-color: #ccc;
color: #333;
border: none;
padding: 8px 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-like—active {
background-color: #e74c3c;
color: #fff;
}

.btn-like—inactive {
background-color: #ecf0f1;
color: #7f8c8d;
}

## Инлайн-стили (альтернатива)

Если нужен динамический цвет из БД (например, пользователь выбрал цвет):

html

❤ Лайк

## Рекомендации

1. **Предпочитайте CSS-классы инлайн-стилям** — это упрощает поддержку и переиспользование стилей.
2. **Кешируйте состояние** — если лайков много, используйте Redis или кеш запросов вместо прямых обращений к БД на каждый рендер.
3. **Защищайте данные** — не передавайте в шаблон сырые SQL-результаты, используйте булевы переменные или перечисления.
4. **Разделяйте логику и представление** — вся работа с БД должна быть в контроллере или сервисном слое, шаблон только отображает.
5. **Доступность** — добавляйте атрибут `aria-pressed` для кнопок-переключателей: `aria-pressed=»{{ is_liked ? ‘true’ : ‘false’ }}»`.

Такой подход обеспечивает корректное отображение состояния при первичной загрузке страницы, а дальнейшие обновления без перезагрузки реализуются через JavaScript (AJAX/fetch).