Why CSS variables are used - The Real Reasons

The Big Idea

Discover how one simple trick can save you hours of tedious style updates!

The Scenario

Imagine you are designing a website with many colors and fonts. You write the same color code #3498db in dozens of places in your CSS file.

The Problem

When you want to change that color, you must find and replace every single instance manually. This is slow, easy to miss some places, and can cause inconsistent colors.

The Solution

CSS variables let you store a value once and reuse it everywhere. Change it in one place, and all uses update automatically.

Before vs After

✗ Before

h1 { color: #3498db; }
p { border-color: #3498db; }

✓ After

:root {
  --main-color: #3498db;
}
h1 { color: var(--main-color); }
p { border-color: var(--main-color); }

What It Enables

It makes styling faster, consistent, and easier to maintain across your whole website.

Real Life Example

Think of a brand color used on buttons, links, and headings. With CSS variables, updating the brand color is just one quick change.

Key Takeaways

Manual repetition of colors or fonts is slow and error-prone.

CSS variables store values once and reuse them everywhere.

Changing a variable updates all related styles instantly.