Опыт использования CSS Container Queries командой Netflix

На web.dev периодически появляются «истории успеха», когда большие компании делятся тем, как они использовали современные технологии (часто — доступные только в Chrome) и им это сильно помогло. И вот, чем поделилась команда Netflix (очень популярный стриминговый сервис с фильмами и сериалами, если вдруг не знали).

1. Пришлось сменить мышление, чтобы проектировать интерфейсы не сверху вниз, а снизу вверх. Раньше нужно было думать сначала о странице, потом уже сообщать компонентам, как они должны на странице себя вести, а потом всё это собирать воедино. Теперь можно сразу продумать гибкость компоненту, потому что он завязан не на вьюпорт, а на контейнер, в который он будет встраиваться. И из компонентов собирать страницу, как из кубиков Лего.

2. Проще работать с медиавыражениями. Раньше нужно было опираться одновременно и на размеры вьюпорта, и на какие-то классы или стили, устанавливаемые через JavaScript. Теперь достаточно смотреть только на размеры контейнера.

3. В принципе стало нужно писать меньше кода. JavaScript почти стал не нужен для выставления размеров элементам. А чем меньше кода, тем проще избавиться от багов.

4. Лучший Developer Experience. Судя по цитатам, некоторые разработчики считают, что так и должен был работать CSS изначально.

5. Ко всему этому можно привязать полифил, если надо работать в браузерах, где Container Queries нет.

Вообще радует, конечно, что наконец-то появилась компания, которая рискнула попробовать классную фичу в большом продакшене. Справедливости ради, внедрили они её не главной Нетфликса, а на страничках проекта Tudum, но говорят, что планируют и в других частях сервиса попробовать. Для меня это сигнал, что с полифилом я вполне себе могу и сам попробовать такое внедрять в своих проектах, если это реально поможет команде эффективнее работать с переиспользуемыми компонентами.

https://web.dev/case-studies/netflix-cq