Назад
2 минуты чтения

Контейнерные style queries + продвинутый attr(): переосмысливаем архитектуру компонентов в CSS 🎨🧩

Продвинутый attr() и Container Style Queries передают типизированные HTML-атрибуты в CSS и делают компоненты автономнее.

Контейнерные style queries + продвинутый attr(): переосмысливаем архитектуру компонентов в CSS 🎨🧩

В CSS тихо происходит небольшая революция: комбинация Container Style Queries и обновлённой функции attr() из спецификации CSS Values and Units Module Level 5 меняет привычные подходы к прокидыванию стилей из HTML.

Брехт Де Рюйте в свежем разборе показывает, как перестать плодить генераторы utility-классов (вроде .grid-cols-3 или .card--compact) и прокидывать параметры прямо из HTML-атрибутов в CSS без единой строчки JS.

Что умеет продвинутый attr()?

Раньше attr() работал только внутри псевдоэлементов (content: attr(...)). Теперь с типом значений мы можем прокидывать любые данные прямо в CSS-свойства:

  • Приведение к юнитам: gap: attr(data-gap cqi, 2cqi) — берет значение data-gap="3" и на лету превращает его в 3cqi.
  • Числа и длины: attr(data-repeat type(<number>), 3) или attr(data-min type(<length>), 280px) — позволяет передавать динамические числа прямо в repeat().
  • Кастомные идентификаторы: attr(data-density type(<custom-ident>), comfortable) — возвращает не строку "compact", а полноценный CSS-ключ compact.

Как это работает в связке с Container Style Queries?

Мы можем прокинуть атрибут с типом custom-ident в кастомную CSS-переменную родителя, а дочерние элементы будут автоматический подстраиваться под неё через @container style()!

<div class="card-grid" data-density="compact">
  <article class="card">...</article>
</div>
.card-grid {
  /* Записываем значение атрибута прямо в CSS-переменную */
  --density: attr(data-density type(<custom-ident>), comfortable);
}

/* Дочерний элемент сам реагирует на переменную родительского контейнера */
@container style(--density: compact) {
  .card {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

В чём кайф такого подхода?

  • Чистый HTML без utility-ада: Никаких громоздких цепочек классов — только понятные дата-атрибуты.
  • Контекстная адаптивность: Компоненты становятся по-настоящему автономными. Им не важно, где они находятся — они запрашивают вычисленные стили родителя.
  • Минимум JS: Чтобы изменить сетку или плотность UI (например, слайдером или переключателем видов), достаточно поменять один атрибут в DOM, а всю математику и анимацию забирает браузер.

Читать полный разбор с интерактивными демками

Как вам идея передавать типы данных через attr() в связке со style queries? Или старые добрые Tailwind-классы всё ещё привычнее? 👇

Скопировано