CSS Variables: The Magic of Custom Properties

Web Development 👁️ 1 views Last updated Apr 26, 2026

The End of CSS Preprocessors

For the better part of a decade, writing raw CSS was considered a developer anti-pattern. Without the ability to use variables, mixins, or nested selectors, CSS files became unmaintainable walls of text. Tools like SASS (SCSS) and LESS became industry standard, allowing developers to define $primary-color: #ff0000; at the top of their files. However, SASS variables had a fatal flaw: they were compiled. Once the SASS was converted to CSS, the variable was permanently replaced with the hex code. The browser had no idea the variable ever existed.

The Power of Native Custom Properties

CSS Custom Properties (commonly called CSS Variables) changed everything because they are live, dynamic DOM properties. The browser understands them at runtime. You define them using a double-hyphen prefix (--) and access them using the var() function.

:root {
  /* Define variables globally on the root HTML element */
  --color-brand: #6d28d9;
  --color-surface: #ffffff;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --radius-card: 12px;
}

.product-card {
  background-color: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--radius-card);
  border: 2px solid var(--color-brand);
}

The Holy Grail: Dark Mode in 5 Lines of Code

Because CSS variables are evaluated at runtime, they cascade just like normal CSS properties. If you overwrite a variable lower down in the DOM tree, any element inside that tree will instantly update its styling to use the new variable. This completely eliminates the need to write separate .dark-mode .product-card classes for every single element in your app.

To implement a global Light/Dark mode toggle, you simply define your variables for the light theme, and then overwrite them when a specific data attribute is present on the <html> or <body> tag.

/* Light Theme (Default) */
:root {
  --bg-color: #f8fafc;
  --text-color: #0f172a;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

Now, inside your JavaScript, a simple toggle button just needs to execute document.documentElement.setAttribute("data-theme", "dark"). Instantly, every single component using var(--bg-color) will flawlessly transition to the dark theme color. This is the exact architecture used by massive UI libraries like TailwindCSS and Material UI.