CSS custom properties (variables) patterns

Need maintainable theming, dynamic values, and consistent design tokens in CSS.

CSS custom properties patterns:

/* Define design tokens */
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --radius: 0.375rem;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

/* Dark theme override */
[data-theme='dark'] {
  --color-text: #f9fafb;
  --color-bg: #111827;
  --color-primary: #60a5fa;
}

/* Component-scoped variables */
.button {
  --btn-padding: var(--spacing-sm) var(--spacing-md);
  --btn-bg: var(--color-primary);
  padding: var(--btn-padding);
  background: var(--btn-bg);
  border-radius: var(--radius);
}

.button:hover {
  --btn-bg: var(--color-primary-hover);
}

/* Fallback values */
.card {
  padding: var(--card-padding, var(--spacing-md));
}

/* Dynamic values with calc */
.grid {
  --columns: 3;
  grid-template-columns: repeat(var(--columns), 1fr);
}

/* Change via JavaScript */
/* document.documentElement.style.setProperty('--columns', '4'); */

CSS custom properties cascade and inherit like other CSS properties but can be changed dynamically via JavaScript, enabling runtime theming without CSS-in-JS.

Web projects needing consistent theming and design systems