⁣CSS-изоляция: почему @scope лучше, чем Shadow DOM и «БЭМ-переусложнение»

Когда речь заходит об изоляции стилей компонента, обычно вспоминают Shadow DOM или жёсткую методологию БЭМ. Но у обоих подходов есть боль: Shadow DOM — это тяжеловесная архитектура и потеря глобальных токенов, а БЭМ часто вырождается в «модификатор на модификаторе» и классы уровня block__element--modifier--state.

В 2023–2024 все стабильные браузеры приняли CSS @scope. Он решает ровно ту задачу, ради которой раньше придумывали сложные обёртки.

Синтаксис:

@scope (.card) {
  :scope { border: 1px solid #d0d7de; }
  .title { font-weight: 600; }
  .button { padding: 8px 12px; }
}

Вся магия: селекторы внутри @scope применяются только к элементам внутри .card. При этом сами классы — обычные, без card__title, без завязки на структуру.

Можно ограничить скоуп ещё точнее — до конкретной вложенности:

@scope (.media) to (.media__content) {
  img { border-radius: 8px; }
}

Здесь стили достаются только элементам между .media и .media__content.

Чем это удобно в реальном проекте:

- не нужен Shadow DOM ради изоляции одного карточного блока;
- не нужно на каждый чих придумывать новый БЭМ-элемент;
- CSS остаётся плоским и предсказуемым;
- можно аккуратно расширять стили библиотечного компонента без риска зацепить чужое.

Почему это не «ещё один препроцессор»:

@scope — нативная фича CSS. В отличие от вложенности в SCSS, он создаёт настоящую границу для каскада: селекторы из внешнего мира применяются к внутрям скоупа, но селекторы внутри скоупа не «утекают» наружу. Именно это ломало всю игру ещё вчера.

БЭМ не отменяется полностью — но там, где раньше нужен был блок с корнем-обёрткой, теперь достаточно легкочитаемого @scope. Компонент становится по-настоящему локальным без лишней разметки и без проклятия специфичности.

Важный нюанс: @scope управляет каскадом, но не специфичностью. Если снаружи написан селектор с #id или ультра-специфичный !important, он всё равно перебьёт скоуп — как и любое другое CSS-правило. Поэтому внутрь скоупа лучше не класть слишком сложные селекторы, а на верхнем уровне не злоупотреблять !important.

Кроссбраузерность сегодня — зелёная: все современные Chrome, Firefox, Safari поддерживают @scope без флагов.

Куда копать дальше:
- CSS Scope Specification — https://drafts.csswg.org/css-cascade-6/
- MDN: @scope — https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

Коротко: если вам нужна чистая локальность стилей «здесь и сейчас» — берите @scope. Shadow DOM оставьте для настоящих web components, а БЭМ — для крупных переиспользуемых систем, где скоуп будет лишним уровнем.

⁣Есть два мощных CSS-механизма, которые позволяют анимировать появление и исчезновение попапов, диалогов и вообще любых элементов с display: none без единой строчки JS. Речь про @starting-style и transition-behavior: allow-discrete.

---

## Проблема
Раньше нельзя было плавно показать попап, который скрыт через display: none (стандарт для popover/dialog в закрытом состоянии). Браузер не мог найти стартовое состояние для перехода. Результат — либо мгновенное появление, либо костыли с JS и реквайрами.

## Решение

**Шаг 1. display и overlay участвуют в transition**

Свойство display — дискретное. Чтобы переход не сработал мгновенно, нужно разрешить дискретные значения анимироваться:

transition-behavior: allow-discrete;

Если указать это в transition для display, то браузер «перекидывает» значение с none на block в **начале** анимации появления и в **конце** анимации исчезновения. Элемент для закрывающегося попапа остаётся видимым до конца анимации, а потом получает display: none.

Для попапов важно ещё и overlay — отключает верхний слой (top layer) только после завершения анимации.

**Шаг 2. @starting-style — стили «до старта»**

Когда браузер переключает display с none, у элемента нет предыдущего состояния, от которого можно анимировать. @starting-style задаёт стартовые стили:

.popover {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.popover:popover-open {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
    transform: translateY(-10px);
  }
}

## Как это работает

- При открытии: @starting-style мгновенно применяет opacity: 0, затем срабатывает переход к opacity: 1.
- При закрытии: обычные стили возвращают попап к opacity: 0, а display: none и уход из top layer (overlay) применяются только в конце transition.

## Важные нюансы

1. Без allow-discrete display переключится мгновенно, анимация исчезновения не будет.
2. overlay нужно указывать именно для элементов в top layer (popover, dialog). Обычные выпадашки могут обойтись без него.
3. Поддержка: все современные браузеры, включая Safari 17.5+ и Chrome 117+. Работает и для <dialog>, и для [popover].

## Минимальный пример

<button popovertarget="tip">Показать</button>
<div popover id="tip">Подсказка</div>

#tip {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete;
}

#tip:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  #tip:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

Теперь никакого JS для анимации попапов — только чистый CSS. Удобно, когда нужно скрыть логику анимации из бандла и убрать хрупкие кодушки с анимациями через классы.

⁣Сегодня покажу, как выкинуть JS из связки «скролл + эффекты». Речь про CSS scroll-driven animations — это уже не polyfill, а нативный API в Chrome/Edge/Safari 26+. Два главных героя: scroll() и view(). Поехали.

**Основы**

scroll() привязывает анимацию к прогрессу прокрутки контейнера. Элемент просто крутится/двигается/закрашивается в зависимости от того, сколько пикселей мы проскроллили.

view() привязывает анимацию к появлению элемента во вьюпорте. Элемент «оживает», когда вползает в кадр, и «умирает», когда выходит. И это идеально для параллакса или плавного появления карточек.

Оба механизма работают через animation-timeline, а за точками старта и конца управляет animation-range.

**Прогресс-бар без единой строчки JS**

Классика: полоска сверху показывает, сколько прочитано. Раньше — слушатель скролла и requestAnimationFrame. Теперь — 5 строк CSS:

.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: #ff4d00;
  transform-origin: left;
  animation: scale linear;
  animation-timeline: scroll();
}

@keyframes scale {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

Всё. scroll() без аргументов = отслеживаем скролл ближайшего предка (или корня, если предка-скроллера нет). Анимация идёт ровно от верха страницы до низа.

**Параллакс через view()**

Берём картинку, которая должна двигаться с другой скоростью, пока она на экране. Вместо scroll-слушателя и пересчёта позиций:

.parallax-image {
  animation: drift linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes drift {
  from { transform: translateY(15%); }
  to   { transform: translateY(-15%); }
}

Поясню значения entry, cover, exit. Палитра простая:
- entry — элемент выезжает снизу/сверху в кадр
- cover — полностью на экране
- exit — покидает вьюпорт

entry 0% cover 40% значит: анимация начинается в момент появления и заканчивается, когда элемент прошёл 40% высоты экрана. За счёт этого картинка «сдвигается» независимо от скорости скролла.

**Важный нюанс: animation-range**

Если у вас контейнер высотой 200%, а анимация должна идти только на середине скролла — играйтесь именно через range. scroll(root) + range: 0% 50% даст эффект, заканчивающийся на половине страницы. Это заменяет кучу логики «если y > X».

**Бонус-фича: animation-timeline: view(block)**

По умолчанию отслеживается ось блока (вертикаль) или инлайна (горизонталь). Можно явно указать view(inline) для горизонтальных слайдеров-каруселей с прокруткой по X. Тоже без JS.

**Что под капотом и поддержка**

Работает только с ключевыми кадрами — CSS-переходы так не умеют. animation-timeline можно комбинировать с обычной animation-duration, но при наличии timeline длительность игнорируется: прогрессом правит скролл.

Поддержка в 2025-м: Chrome 115+, Edge 115+, Safari 26+ (с префиксом -webkit- в iOS 26). Firefox — за флагом, но уже в активной разработке. Для отстающих браузеров это деградирует безболезненно: без поддержки просто не будет анимации.

**Моя рекомендация**

Не пишите свой параллакс через JS, если это обычный маркетинговый лендинг. Нативный scroll-driven API считается на стороне compositor, поэтому дёрганий и микролагов на слабых устройствах меньше, чем при ручном обновлении свойств из JS.

Вывод: добавьте scroll() на прогресс-бар, view() на карточки — почувствуете разницу в скорости вёрстки сразу.