Реактивность в CSS

Реактивность — это когда изменение состояния одной штуки приводит к реакции — изменению состояния других штук. К примеру, если температура воздуха опустилась ниже 0°C, вода замёрзнет и сожмётся.

Реактивность в программировании тоже про реакцию на изменение состояния. Пример:

let number = 2;
let doubled = number * 2;
// doubled равно 4

Число number — это переменная состояния. Удвоенное число doubled «выводится» из этой переменной. Если число меняется, то удвоенное число по умолчанию не «обновится», нужно явно вычислить его ещё раз:

let number = 2;
let doubled = number * 2;
// doubled равно 4

number = 5;
doubled = number * 2;
// doubled равно 10

Такая «ручная реактивность» неоптимальна. Современные JS-фреймворки, например Svelte, умеют в автоматическую реактивность. Для этого «реактивное» значение нужно явно определить, а фреймворк будет автоматически следить за изменением «источников» и пересчитывать состояние:

let number = 2;
$: doubled = number * 2;
// doubled равно 4

number = 5;
// doubled стало 10

Нативные переменные в CSS — сразу реактивные «из коробки». Браузер будет следить за их изменением и пересчитывать все зависящие от них значения.

<div class="block"></div>
<div class="block modified"></div>

.block {
  --number: 20px;
  --doubled: calc(var(--number) * 2);

  width: var(--doubled);
  /* width равно 40px */
}

.block.modified {
  --number: 50px;
  /* width стало 100px */
}