CSS Variable: Syntax, Usage, and Examples

CSS variables, also known as custom properties, store reusable values directly in stylesheets. They simplify maintenance, enhance consistency, and enable dynamic theming by defining values globally or locally.

How to Use CSS Variables

Define CSS variables using the -- prefix inside a selector, typically :root for global scope. Access them with the var() function.

Basic Syntax

:root {
  --primary-color: blue;
  --font-size: 16px;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size);
}

Breaking Down the Syntax

1. :root – Defines variables at the highest level, making them available throughout the stylesheet.
2. -primary-color – Stores a reusable color value.
3. var(--primary-color) – Retrieves and applies the variable.

Local vs. Global Variables

Define CSS variables within specific selectors to limit their scope.

.card {
  --border-color: #ddd;
  border: 2px solid var(--border-color);
}

The --border-color variable applies only inside .card.

When to Use CSS Variables

Creating a Consistent Design System

CSS variables ensure design consistency across an entire website. Updating a single variable changes all instances where it’s used.

:root {
  --button-bg: #ff6600;
  --button-text: white;
}

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

A brand color change only requires modifying --button-bg, which reflects the update site-wide.

Enabling Dynamic Theming

CSS variables enable theme switching without modifying multiple styles.

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

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

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

Applying .dark-mode updates the theme dynamically without extra styles.

Reducing Repetitive Code

Instead of repeating values across multiple classes, CSS variables centralize them.

:root {
  --spacing: 10px;
}

.container {
  padding: var(--spacing);
  margin: var(--spacing);
}

Examples of CSS Variables in Action

Defining Color Variables

CSS color variables simplify theme customization.

:root {
  --primary: #3498db;
  --secondary: #2ecc71;
}

header {
  background: var(--primary);
}

footer {
  background: var(--secondary);
}

Responsive Typography

CSS variables adjust typography dynamically.

:root {
  --base-font-size: 16px;
}

body {
  font-size: var(--base-font-size);
}

@media (min-width: 768px) {
  :root {
    --base-font-size: 18px;
  }
}

When the screen width increases, the base font size scales automatically.

Gradients and Shadows

CSS variables store complex values like gradients and shadows.

:root {
  --box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  --gradient: linear-gradient(to right, #ff7e5f, #feb47b);
}

.box {
  box-shadow: var(--box-shadow);
  background: var(--gradient);
}

Animation Speed Control

Define animation durations in a single place and reuse them across multiple animations.

:root {
  --transition-speed: 0.3s;
}

.button {
  transition: background var(--transition-speed), color var(--transition-speed);
}

.button:hover {
  background: black;
  color: white;
}

Advanced CSS Variable Concepts

Using JavaScript to Modify Variables

CSS variables update dynamically using JavaScript.

document.documentElement.style.setProperty('--primary-color', 'red');

This modifies --primary-color in real-time without editing CSS files.

Overriding Variables in Components

CSS variables allow component-level styling overrides.

.card {
  --card-bg: #fff;
  background: var(--card-bg);
}

.dark-mode .card {
  --card-bg: #333;
}

Applying .dark-mode updates all .card elements instantly.

Combining CSS Variables with Utility Classes

CSS frameworks like Tailwind CSS use variables for scalable utility styles.

:root {
  --spacing: 8px;
}

.mt {
  margin-top: var(--spacing);
}

.pt {
  padding-top: var(--spacing);
}

These utility classes ensure flexible styling while maintaining consistency.

Variable Inheritance and Fallbacks

CSS variables inherit values and support fallback options when a variable is missing.

.box {
  color: var(--text-color, black);
}

If --text-color isn't defined, the color defaults to black.

Performance Considerations

CSS variables improve maintainability but should be used efficiently.

Best Practices

1. Define Global Variables for Shared Values – Store commonly used values in :root for consistency.
2. Avoid Nesting Too Many Variables – Overcomplicating dependencies makes debugging harder.
3. Minimize Variable Changes in High-Performance Scenarios – Frequent updates via JavaScript can cause repaints.

Learn More About CSS Variables

CSS Root Variables

Using :root ensures global accessibility, maintaining uniform styling across components.

:root {
  --font-family: Arial, sans-serif;
}

body {
  font-family: var(--font-family);
}

Defining and Using CSS Variables in Different Contexts

CSS variables apply at different levels depending on need.

.sidebar {
  --bg-color: #222;
  background: var(--bg-color);
}

This keeps styles modular without affecting unrelated components.

CSS variables streamline styling, improve maintainability, and enable dynamic theming without modifying multiple stylesheets. They enhance performance and consistency while reducing repetition in code. Whether used for colors, typography, animations, or UI components, CSS variables provide a powerful way to manage styles efficiently.