Invalid at computed-value time: the surprise
For .b, the earlier color: red is NOT used. The declaration became unset, so color inherits from .parent.
Custom properties (CSS variables) are properties you name yourself, like --brand, read with var(--brand, fallback); they inherit down the page like color does, so redefining one on a parent re-themes everything inside it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Create tokens --space-1 (0.25rem), --space-2 (0.5rem) and --space-4 (1rem) on :root and use them for a .card's padding (space-4) and gap between its children (space-2).
Make an .alert component whose border and text use --alert-color, defaulting to blue when not set, and an .alert.error variant that sets it to red.
Write a JavaScript line that reads --brand from the root, and one that sets it to #7c3aed.
Explain it without notes
What is a custom property and how do you read it?
Explain how scope and inheritance make custom properties good for theming.
When is the fallback in var(--x, fallback) used, and when is it not?
What does "invalid at computed-value time" mean, and what value does the property get?
How do CSS custom properties differ from Sass variables?
Preview
Console
Nothing logged yet.Expected console output
a rgb(255, 0, 0)
b rgb(30, 41, 59)
c rgb(0, 128, 0)