CSS custom properties (variables) in Svelte - Step-by-Step Execution

Concept Flow - CSS custom properties (variables)

Define custom property in :root or selector

↓

Use var() function to access property

↓

Browser applies value to CSS property

↓

If property changes, dependent styles update

↓

Styles render with updated values

CSS custom properties are defined once and reused with var(), allowing easy style updates and consistent theming.

Execution Sample

Svelte

:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
}

Defines a blue color variable and uses it as the button background color.

Execution Table

Step	CSS Rule Processed	Custom Property Defined	Property Used	Computed Value	Visual Effect
1	:root { --main-color: #3498db; }	--main-color = #3498db	N/A	N/A	Variable stored for use
2	button { background-color: var(--main-color); }	No new variable	background-color	#3498db	Button background becomes blue
3	Change --main-color to #e74c3c	--main-color = #e74c3c	background-color	#e74c3c	Button background updates to red
4	Remove --main-color definition	--main-color undefined	background-color	falls back to initial (transparent)	Button background loses color
5	Use var(--main-color, #2ecc71) with fallback	No change	background-color	#2ecc71	Button background becomes green fallback
6	End of style processing	Final state	Final computed styles	Final values applied	Styles rendered on page

💡 CSS processing ends after applying all rules and resolving variables with fallbacks if needed.

Variable Tracker

Variable	Initial	After Step 1	After Step 3	After Step 4	After Step 5	Final
--main-color	undefined	#3498db	#e74c3c	undefined	undefined	undefined

Key Moments - 3 Insights

Why does the button background change color when --main-color is updated?

Because the button uses var(--main-color), when the variable changes (see step 3), the button's background-color updates automatically (step 3 row in execution_table).

What happens if --main-color is not defined and no fallback is given?

The property using var(--main-color) becomes invalid and falls back to the default CSS value (step 4 shows variable undefined and background-color loses color).

How does the fallback value in var() work?

If the variable is undefined, the fallback value is used instead (step 5 shows background-color uses fallback #2ecc71).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of --main-color after step 3?

A undefined

B #e74c3c

C #3498db

D #2ecc71

💡 Hint

Check the 'Custom Property Defined' column at step 3 in the execution_table.

At which step does the button background lose its color because the variable is undefined?

A Step 2

B Step 5

C Step 4

D Step 1

💡 Hint

Look for when --main-color becomes undefined and background-color changes in the execution_table.

If we add a fallback value in var(--main-color, #2ecc71), what color will the button background be when --main-color is undefined?

A #2ecc71

B #e74c3c

C #3498db

D transparent

💡 Hint

See step 5 in execution_table where fallback value is used.

Concept Snapshot

CSS custom properties are variables defined with --name inside selectors like :root.
Use them with var(--name) to apply consistent values.
If variable changes, all uses update automatically.
Fallback values in var() provide defaults if variable is missing.
Great for theming and easy style updates.

Full Transcript

CSS custom properties, also called CSS variables, let you store values like colors or sizes in one place. You define them inside selectors such as :root using --variable-name syntax. Then you use them in your CSS with the var() function. When the variable changes, all places using it update automatically. If a variable is missing, you can provide a fallback value inside var(). This makes styling easier and consistent. For example, defining --main-color in :root and using var(--main-color) for button backgrounds means changing the color in one place updates all buttons. If the variable is removed, the style falls back or becomes default. This visual trace shows how variables are stored, used, updated, and how fallbacks work step-by-step.