Introduction to CSS Variables (Custom Properties)

Published on: by Dr. Talib

Imagine you have a large website where the main brand color is used in 50 different places. If the brand color changes, you have to find and replace all 50 instances. CSS Variables, officially called "Custom Properties," solve this problem by letting you define reusable values right inside your CSS.

How to Declare and Use a CSS Variable

The Concept: You declare a variable inside a selector, and then you can use that variable within that selector or any of its children. It's best practice to declare global variables on the :root selector, which makes them available everywhere.

  • Declaration: To declare a variable, you use a name that starts with two dashes, like --main-bg-color: #f0f0f0;.
  • Usage: To use a variable, you call it with the var() function, like background-color: var(--main-bg-color);.

A Simple Example:

<style>
  :root {
    --primary-color: #4f46e5;
    --text-color-light: white;
    --border-radius-default: 8px;
  }
  
  .my-button {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    border-radius: var(--border-radius-default);
    padding: 10px 20px;
    border: none;
  }
  
  .my-card {
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-default);
    padding: 1rem;
  }
</style>

<button class="my-button">Click Me</button>
<div class="my-card">This card uses the same theme!</div>

Try it Yourself: Paste this into the HTML Viewer. Now, change the value of --primary-color in the :root block just once. Notice how both the button's background and the card's border update instantly. This is the power of variables!

The Biggest Advantage: Theming

CSS Variables are "live," which means they can be updated with JavaScript. This makes them incredibly powerful for creating features like light and dark mode themes.

You can define a default set of colors on the :root, and then redefine them inside a class selector like .dark-mode. When you add that class to the <body>, all the variables instantly update across the entire site.

Example of a Dark Mode Theme:

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

body.dark-mode {
  --background: #121212;
  --text-color: #e0e0e0;
}

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

When you use JavaScript to add the dark-mode class to the body, the browser automatically switches to the new set of variables, and your entire theme changes.

Variables vs. Pre-processor Variables (like Sass)

If you've used tools like Sass or Less, you might be familiar with variables like $primary-color. What's the difference?

  • Sass/Less Variables are compiled. The tool replaces the variable with the hard-coded value *before* the CSS file is ever sent to the browser. The browser never sees the variable.
  • CSS Variables are live in the browser. The browser understands them, and they can be inspected in the DevTools and, most importantly, changed with JavaScript.

Both are useful, but native CSS Variables open up a world of dynamic, interactive possibilities that pre-processors can't match.

Write Smarter, More Maintainable CSS

By centralizing your repeated values like colors, fonts, and spacing into variables, you make your projects drastically easier to update and maintain. Adopting CSS Variables is a modern best practice that will save you countless hours of work on any project, big or small.