CSS Variables

ELI5 — The Vibe Check

CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere. Change the variable in one place and it updates across your whole stylesheet. They're like variables in a programming language but living inside CSS. And they work in the browser, no build step needed.

Real Talk

CSS Custom Properties (CSS Variables) are defined with a -- prefix and accessed via var(). They're scoped to the DOM (can be changed per-element or in @media queries), cascade like regular CSS, and are accessible from JavaScript. They enable dynamic theming, design tokens, and real-time style updates without Sass.

Show Me The Code

:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

/* Override for dark mode */
@media (prefers-color-scheme: dark) {
  :root { --color-primary: #60a5fa; }
}

When You'll Hear This

"Use CSS variables for your color tokens so dark mode is a one-line swap." / "CSS variables can be updated from JavaScript — great for dynamic theming."