Чем отличаются CSS переменные от констант JS?

CSS переменные vs JS константы

Оба способа используются для хранения значений, но они работают совершенно по-разному и применяются в разных контекстах.

CSS переменные (Custom Properties)

CSS переменные (custom properties) — это встроенный механизм CSS, позволяющий определить значение один раз и переиспользовать его в стилях:

:root {
  --primary-color: #007bff;
  --border-radius: 8px;
  --spacing-unit: 4px;
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 4);
}

Ключевые особенности:

• Каскадность: CSS переменные наследуются и могут переопределяться на разных уровнях
• Динамичность: можно менять в runtime через JavaScript
• Область видимости: привязаны к селектору, в котором определены
• Поддержка расчётов: работают с calc()

/* Область видимости */
:root { --main-color: blue; }  /* глобально */
.card { --main-color: red; }   /* только в .card */
.card h1 { color: var(--main-color); } /* красная */

JS константы

JS константы — это переменные в JavaScript, которые нельзя переприсвоить:

const PRIMARY_COLOR = '#007bff';
const BORDER_RADIUS = 8;
const SPACING_UNIT = 4;

const buttonStyle = {
  backgroundColor: PRIMARY_COLOR,
  borderRadius: `${BORDER_RADIUS}px`,
  padding: `${SPACING_UNIT * 4}px`
};

Ключевые особенности:

• Статичность: значение определено на момент компиляции/запуска
• Область видимости: JavaScript scope (модуль, функция, блок)
• Типизация: в TypeScript можно указать тип
• Доступны только в JS: нельзя напрямую использовать в CSS

Главные отличия

Практический пример: Темизация

С CSS переменными:

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f5f5f5;
  }
}

body { 
  background: var(--bg-color);
  color: var(--text-color);
}

Тема переключается автоматически в зависимости от системных настроек!

С JS константами:

const THEME_LIGHT = {
  bgColor: 'white',
  textColor: 'black'
};

const THEME_DARK = {
  bgColor: '#1a1a1a',
  textColor: '#f5f5f5'
};

const currentTheme = isDarkMode ? THEME_DARK : THEME_LIGHT;
button.style.backgroundColor = currentTheme.bgColor;

Нужно вручную ставить стили через JavaScript.

Изменение в runtime

CSS переменные легко менять через JS:

// Сменить цвет глобально
document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

// Или на конкретном элементе
element.style.setProperty('--accent-color', 'orange');

// Получить значение
const color = getComputedStyle(element).getPropertyValue('--primary-color');

JS константы менять через переприсвоение нельзя:

const COLOR = 'blue';
COLOR = 'red'; // TypeError: Assignment to constant variable

Когда что использовать

CSS переменные лучше для:

• Значений, которые нужны в CSS (цвета, размеры, шрифты)
• Темизации и адаптивных стилей
• Значений, которые могут менять при runtime
• Глобальных стилистических токенов

:root {
  --color-primary: #007bff;
  --spacing-xs: 4px;
  --font-size-base: 16px;
}

JS константы лучше для:

• Бизнес-логики и конфигурации
• API endpoints и URLs
• Числовых расчётов
• Данных, которые нужны только в JavaScript

const API_BASE_URL = 'https://api.example.com';
const MAX_RETRIES = 3;
const DEBOUNCE_DELAY = 300;

Гибридный подход

В современных проектах (как PrepBro) используют оба подхода:

// constants.ts
export const COLORS = {
  PRIMARY: 'var(--color-primary)',
  SECONDARY: 'var(--color-secondary)'
};

// styles.css
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
}

// component.tsx
const buttonStyle = {
  backgroundColor: COLORS.PRIMARY
};

Вывод

CSS переменные — встроенный инструмент браузера для динамической стилизации, JS константы — способ организовать данные в коде. Выбор зависит от того, нужно ли значение в CSS или в JavaScript, и будут ли они меняться в runtime.