Chapter 31: Custom Properties

Custom Properties (also called CSS Variables)

Before custom properties existed (pre-2016), CSS was very rigid:

• You had to repeat the same color / spacing / font-size value dozens of times
• Changing the primary color? → Find & replace in 50 places
• Want a dark mode? → Duplicate almost the entire stylesheet
• Want to make spacing consistent? → Memorize magic numbers like 16px, 24px, 32px everywhere

Custom properties solved all of these problems in one elegant way.

They are basically variables you define once → use everywhere → change in one place → everything updates instantly.

Let’s learn it properly — like I’m sitting next to you with VS Code open, explaining line by line.

1. Basic Syntax – How to Create & Use Custom Properties

Custom properties always start with two dashes — and are defined inside any selector (most commonly :root).

Key points:

• You define them with –variable-name: value;
• You use them with var(–variable-name)
• They inherit like normal CSS properties (so :root makes them global)
• You can define them anywhere (on .dark-mode, on .card, on button, etc.) → they override higher up the cascade

2. Real Power – Change Theme in One Place

Want dark mode? Just override variables:

→ One change → entire site updates colors automatically.

3. Very Practical Real-World Example (Copy-Paste & Play)

index.html

style.css (all power comes from variables)

What You Should Do Right Now

1. Open the file → see light theme
2. Click “Toggle Theme” → watch dark mode instantly apply everywhere
3. Change –primary value in :root → entire site primary color changes
4. Change –spacing-md: 3rem; → all medium spacing updates
5. Look at .card.featured → see how it overrides –surface locally

Why Custom Properties Are a Game-Changer (2026 Perspective)

• Single source of truth — change brand color once
• Dark mode becomes trivial
• Theming (company blue vs client red vs seasonal themes)
• Consistency — no more 16px vs 1rem vs 1.2em confusion
• Local overrides — one card can have different background without duplicating CSS
• Calculations — calc(var(–spacing-md) * 1.5)
• Works with JS — change variables dynamically (document.documentElement.style.setProperty(‘–primary’, ‘#ef4444’))

How does it feel when you change one color and everything updates? That “wow” moment is exactly why custom properties are now standard in every serious CSS codebase.

Next possible lessons — tell me:

• “real-world theme switcher with localStorage + JS”
• “using custom properties inside calc() & hsl()”
• “advanced theming (brand colors, seasonal themes)”
• “container queries + custom properties”
• “common mistakes people make with CSS variables”

You’ve just unlocked one of the biggest productivity boosters in modern CSS. Chai khatam? Fresh cup lao — let’s keep enhancing! 🚀 😄