Как определить переменную CSS в коде?

CSS-переменную можно задать в CSS, в атрибуте style и из JavaScript.

В CSS

:root { --accent: #0066ff; }

В разметке

<div class="progress" style="--value: 40%"></div>

.progress::after { width: var(--value); }

Удобно для значений из данных: прогресс, цвет категории, позиция.

Из JavaScript

const root = document.documentElement;
root.style.setProperty('--accent', '#ff3366');        // установить
getComputedStyle(root).getPropertyValue('--accent');   // прочитать
root.style.removeProperty('--accent');                 // удалить

В React

<div style={{ '--value': `${percent}%` }} />

Почему так удобно

JS меняет только значение, а все правила, где переменная используется, остаются в CSS — не нужно писать много инлайн-стилей.

Коротко для собеседования

В CSS — --name: value, в разметке — через style, в JS — style.setProperty('--name', value) и getPropertyValue для чтения.

Подробнее: MDN — setProperty