sibling-index() и sibling-count() вместо инлайнов и костылей | CSS Боль

Как собрать спиннер и похожие паттерны без JavaScript и инлайнов. Новые функции CSS sibling-index() и sibling-count() сокращают «батарею» правил и превращают компоненты в гибкие и масштабируемые — в чистом CSS. Что разберём: – Почему раньше приходилось дублировать стили и считать углы и задержки вручную. – Как помогали препроцессоры и почему это не идеальное решение. – Промежуточное решение на CSS-переменных и calc(). – И, наконец, sibling-index() и sibling-count() — чистая разметка, меньше кода, лёгкая параметризация. Таймкоды: 00:00 Введение и анонс функций 01:19 Описание старой демки 02:12 Проблемы старого подхода 03:10 Промежуточные решения 06:03 Рефакторинг и использование новых функций 07:38 Эксперименты с разметкой 08:47 Использование `sibling-count` 11:17 Завершение реализации 12:11 Итоги 12:20 Магия стилей 13:16 Эксперименты с параметрами 14:14 Нестандартные эффекты 15:08 Гибкость и эксперименты 15:39 Спецификация и будущее 16:47 Заключение #animation