CSS Variables & Custom Properties | Theming & Reusable Styles

CSS Variables, also called Custom Properties, completely change how we write scalable and maintainable CSS. They allow you to store values once and reuse them everywhere, just like variables in programming languages.

This guide explains CSS Variables from real-world usage point of view: theming, dynamic styles, layout control, and component-based design with clear micro explanations and live examples.

What are CSS Variables?

CSS Variables are reusable values defined using the --variable-name syntax and accessed using var().

Info!
CSS Variables live in the browser, not at build time like Sass variables. This means they can change dynamically.

1. Declaring CSS Variables

Variables are usually declared inside :root so they are globally available.

<div class="card">Primary Card</div>

<style>
:root {
  --primary-color: #6366f1;
  --radius: 14px;
}

.card {
  padding: 20px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius);
}
</style>

Change the value once in :root and the whole UI updates.

2. Variables with Fallback Values

You can provide a fallback value if a variable is missing.

<div class="box">Fallback Example</div>

<style>
.box {
  padding: 16px;
  background: var(--unknown-color, #22c55e);
  color: white;
}
</style>

If the variable doesn’t exist, CSS safely uses the fallback.

3. Component-Level Variables

Variables don’t have to be global. You can scope them to components.

<div class="alert success">Success Alert</div>
<div class="alert error">Error Alert</div>

<style>
.alert {
  --bg: #e5e7eb;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg);
  color: #111827;
}

.alert.success {
  --bg: #dcfce7;
}

.alert.error {
  --bg: #fee2e2;
}
</style>

Each variant overrides only the values it needs.

4. Theme Switching (Light / Dark)

CSS Variables make theming incredibly simple.

<div class="theme dark">
  <p>Themed Content</p>
</div>

<style>
:root {
  --bg: #ffffff;
  --text: #111827;
}

.theme {
  padding: 20px;
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
}

.theme.dark {
  --bg: #111827;
  --text: #f9fafb;
}
</style>

Only variables change, not the actual CSS rules.

5. Dynamic Layout Control

Variables can control spacing, sizes, and layouts.

<div class="grid">
  <div>Box</div>
  <div>Box</div>
  <div>Box</div>
</div>

<style>
.grid {
  --gap: 24px;
  display: flex;
  gap: var(--gap);
}

.grid div {
  padding: 20px;
  background: #e0e7ff;
}
</style>

Adjust layout spacing without touching layout logic.

6. Animations Using Variables

Variables can even drive animations.

<div class="pulse"></div>

<style>
.pulse {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #6366f1;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.4);
    opacity: .4;
  }
}
</style>

Change animation behavior by adjusting variables.

Real-World Use Cases

Design systems
Theme switching
Reusable UI components
Responsive spacing
Animation tuning

1. Design System using CSS Variables

A design system means all core values like colors, spacing, radius, and typography live in one place.

<div class="card">Design System Card</div>
<div class="card secondary">Secondary Card</div>

<style>
:root {
  /* Design Tokens */
  --color-primary: #6366f1;
  --color-secondary: #22c55e;
  --radius-lg: 16px;
  --space-md: 20px;
  --text-dark: #111827;
}

.card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: white;
  margin-bottom: 12px;
}

.card.secondary {
  background: var(--color-secondary);
}
</style>

Explanation: This mirrors real design systems like Material or Tailwind. Change tokens once, update the whole UI.

2. Theme Switching (Light / Dark)

Theme switching works by overriding variables instead of rewriting CSS.

<div class="theme light">Light Theme</div>
<div class="theme dark">Dark Theme</div>

<style>
:root {
  --bg: #ffffff;
  --text: #111827;
  --border: #e5e7eb;
}

.theme {
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 12px;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
}

.theme.dark {
  --bg: #111827;
  --text: #f9fafb;
  --border: #374151;
}
</style>

Explanation: Only variable values change. Layout and components remain untouched.

3. Reusable UI Components

Components become flexible when behavior is controlled by variables.

<button class="btn">Primary</button>
<button class="btn danger">Danger</button>
<button class="btn outline">Outline</button>

<style>
.btn {
  --btn-bg: #6366f1;
  --btn-text: white;

  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  margin-right: 8px;
}

.btn.danger {
  --btn-bg: #ef4444;
}

.btn.outline {
  --btn-bg: transparent;
  --btn-text: #6366f1;
  border: 2px solid #6366f1;
}
</style>

Explanation: Same button, different personalities. No duplicated CSS.

4. Responsive Spacing with Variables

Spacing can adapt to screen size by redefining variables.

<div class="stack">
  <div class="box">Item</div>
  <div class="box">Item</div>
  <div class="box">Item</div>
</div>

<style>
.stack {
  --gap: 24px;
  display: flex;
  gap: var(--gap);
}

.box {
  padding: 20px;
  background: #e0e7ff;
}

@media (max-width: 600px) {
  .stack {
    --gap: 12px;
    flex-direction: column;
  }
}
</style>

Explanation: Only spacing changes across breakpoints, not layout logic.

5. Animation Tuning with Variables

Animations become adjustable without touching keyframes.

<div class="dot slow"></div>
<div class="dot fast"></div>

<style>
.dot {
  --speed: 1.5s;
  width: 40px;
  height: 40px;
  background: #6366f1;
  border-radius: 50%;
  margin: 12px;
  animation: bounce var(--speed) ease-in-out infinite;
}

.dot.fast {
  --speed: .6s;
}

@keyframes bounce {
  50% {
    transform: translateY(-30px);
    opacity: .6;
  }
}
</style>

Explanation: Same animation logic, different behavior controlled by variables.

Summary: CSS Variables turn static CSS into a flexible system. They power modern design systems, theming, reusable components, responsive layouts, and fine-tuned animations without rewriting code.

This is why CSS Variables are the backbone of modern UI architecture.

Tip!
Use variables for values that repeat or might change later.

Warning!
Avoid over-abstracting. Too many variables can reduce readability.

Final Thoughts

CSS Variables bridge the gap between static styles and dynamic design systems. Once you start using them, writing CSS feels structured, flexible, and future-proof.

Modern CSS without variables is like coding without functions.

Next lesson: CSS Forms & UI Component Styling

Maxoncodes