Я как-то упустил насколько быстро сейчас развивается CSS. Кажется, что через несколько лет препроцессоры и другие решения будут не особо то и нужны.
-
CSS переменные у нас уже есть давным давно
-
Вместо БЭМА и CSS модулей сможем использовать @scope
-
Можем сократить количество !important при переопределении стилей, просто помещаем стили внутрь разных каскадных слоёв с помощью @layer.
-
Смешиваем цвета прямо в CSS
-
поддержка 91.5% `color-mix(in srgb, var(--c), white var(--pct))
-
Заменяем медиа выражения на if-ы
-
поддержка 64% `color: if(style(--theme: dark): white; style(--theme: light): black; else: black);
-
Долой миксины, да здравствуют нативные кастомные функции
-
поддержка 0.04% — свежачок 🥒
`/* Функция для смешивания цвета с белым */ @function --tint(--c, --pct) { result: color-mix(in srgb, var(--c), white var(--pct)); }
Наверняка ещё что-то упустил, если что — подскажите 🙏. Проверить, что все эти функции действиетльно работают (в хроме) можно 👉 вот в этой демке — просто загляните в исходники.
Подробнее здесь:
- @layer - Управляем каскадными слоями своими руками
- Условные операторы CSS с новой функцией if()
- Знакомимся с @scope в CSS
- Custom CSS Functions in the Browser
#css```