CSS Variables (also called Custom Properties) are one of the most powerful features in modern CSS. They help you write clean, reusable, and maintainable styles.

In this guide, you’ll learn:

• What CSS Variables are
• Why we need them
• How they work
• Real-world examples
• Best practices

---

What Are CSS Variables?

CSS Variables are custom values that you define and reuse in your CSS.

👉 They start with -- and are accessed using var().

---

Basic Example

:root {
  --primary-color: blue;
}button {
  background-color: var(--primary-color);
}

👉 Output:

• Button background becomes blue

---

Why Do We Need CSS Variables?

Before CSS Variables, we had problems like:

❌ Repeating same values everywhere
❌ Difficult to update styles
❌ No dynamic theming

---

Example Without Variables

button {
  background-color: blue;
}.header {
  color: blue;
}

👉 If you want to change blue → red, you must update everywhere ❌

---

With CSS Variables

:root {
  --primary-color: blue;
}button {
  background-color: var(--primary-color);
}.header {
  color: var(--primary-color);
}

👉 Change once → updated everywhere ✅

---

How CSS Variables Work

---

🔹 Defining Variables

:root {
  --main-color: green;
}

👉 :root = global scope

---

🔹 Using Variables

p {
  color: var(--main-color);
}

---

Scope of CSS Variables

---

🔹 Global Scope

:root {
  --color: red;
}

👉 Available everywhere

---

🔹 Local Scope

.card {
  --color: blue;
}.card p {
  color: var(--color);
}

👉 Only inside .card

---

Updating Variables Dynamically

You can update variables using JavaScript:

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

👉 Instantly updates UI 🔥

---

Real-World Use Case: Theme Switching

---

Light Theme

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

---

Dark Theme

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

---

Usage

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

👉 Just toggle .dark class → theme changes instantly

---

Fallback Values (Very Important)

color: var(--primary-color, red);

👉 If variable not defined → fallback to red

---

Advanced Example

:root {
  --spacing: 10px;
}.container {
  padding: calc(var(--spacing) * 2);
}

👉 Works with calculations 🔥

---

🆚 CSS Variables vs SCSS Variables

Feature	CSS Variables	SCSS Variables
Runtime change	✅ Yes	❌ No
Works in browser	✅ Yes	❌ Precompiled
Dynamic themes	✅ Yes	❌ No

---

Best Practices

• Use meaningful names (--primary-color)
• Define global variables in :root
• Avoid overusing variables
• Use for themes and reusable values

---

Where CSS Variables Are Used

• React (MUI, Tailwind configs)
• Theming systems
• Design systems
• Dark/light mode

---

Interview Tip

If asked:

“What are CSS variables?”

👉 Answer:

“CSS variables are reusable custom properties that allow dynamic styling and runtime updates in CSS.”

---

🏁 Final Summary

• CSS Variables improve maintainability
• They support dynamic updates
• Useful for themes and reusable styles
• Work directly in browser

---

Related Articles

• Showing Greeting Message using ReactJS
• Solution: Jest encountered an unexpected token and failing at —- import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’
• Solution: TypeError: Cannot read properties of undefined (reading ‘DemoContainer’) and failing because of components={[‘DatePicker’, ‘TimePicker’]} in the DemoContainer tag.

---

💡 Found this helpful? Subscribe to get simple frontend tutorials, real-world examples, and developer tips. Happy Coding!

---