Why CSS custom properties (variables) in Svelte? - Purpose & Use Cases

The Big Idea

What if you could change your entire website's look by editing just one line of code?

The Scenario

Imagine you want to change the main color of your whole website. You have to find and update every place in your CSS where that color is used.

The Problem

Manually changing colors everywhere is slow and easy to miss spots. It can cause inconsistent styles and lots of frustration.

The Solution

CSS custom properties let you define a color once as a variable and reuse it everywhere. Changing the variable updates all uses instantly.

Before vs After

✗ Before

body { color: #3498db; } h1 { color: #3498db; } button { background: #3498db; }

✓ After

:root { --main-color: #3498db; } body { color: var(--main-color); } h1 { color: var(--main-color); } button { background: var(--main-color); }

What It Enables

You can easily create themes and update styles globally with just one change.

Real Life Example

A website that switches between light and dark mode by changing a few CSS variables instead of rewriting all styles.

Key Takeaways

Manually updating repeated styles is slow and error-prone.

CSS custom properties let you store values once and reuse them.

Changing a variable updates all related styles instantly.