#codepen дня
#css #variables #custompropetries #переменные

Кто-то хотел посмотреть на тормозящий рендеринг без использования холста, скриптов и WebGL? Я вам принёс :)

И тема самая что ни на есть новогодняя: бумажные снежинки. Да-да, буквально имитация вырезанных из бумаги снежинок и звёзд: https://codepen.io/michellebarker/pen/YzGEJoX

Прекрасная работа, в которой оправдано каждое применение пользовательских свойств aka переменных. Но заклинаю вас, не делайте так на реальном проекте, рендеринг этого простого, но всё же монстра, жутко тормозит.

А вот для изучения особенностей – это пожалуйста. Всё максимально просто и понятно.

#инструмент дня

Я когда готовил пример для поста про View Transition API, обратил внимание, как написан один из CodePen'ов, на которые я опирался. Конкретно, вот этот: https://codepen.io/argyleink/pen/GRPRJyM

Что же с ним не так? Да вроде всё так, но он импортирует нечто под названием open-props и потом использует какие-то переменные в коде...

Итак, оказалось, это — прости, господи — субатомные стили под названием Open Props: https://open-props.style/

Как можно догадаться, названы они так в пику атомным стилям типа Tailwind CSS, Assembler CSS, Tachyons или Windi CSS. Или любой другой попытке бакендеров сделать свой UI-кит.

Вот только вышеописанные наборы оперируют классами, а Open Props — переменными. Они предлагают интересный набор из цветов, размерностей, анимаций, теней и даже градиентов. Особенно меня порадовали типографические шлюзы aka clamp (Fluid sizes в терминологии фреймворка).

Получается что-то такое:

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

Это позволяет добиться максимальной гибкости, сохраняя общее единообразие и переиспользуя известные размеры, но не классы. И так можно собрать уже что угодно.

В общем, интересный подход. Точно имеет право на жизнь.

#css #var #variables #ui #kit