Custom properties participate in the cascade and can express shared design tokens. Their values are resolved where used, including inheritance.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A card consumes an inherited color token that changes under a theme attribute. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Define token ownership
Place shared theme values at an appropriate ancestor and local overrides on components that intentionally differ.
Step 2: Resolve at the consumer
Custom properties inherit and are substituted where used, so the consuming property’s grammar still determines validity.
Step 3: Handle missing and invalid values
A fallback helps when a variable is unavailable; it does not fix every defined value incompatible with the target property.
Worked scenario
A card consumes an inherited color token that changes under a theme attribute.
:root { --card-color: #234; }
.card { color: var(--card-color, #234); }Setting –card-color to a non-color token can make the resulting color declaration invalid rather than selecting the fallback automatically. Keep token names and accepted value types consistent across theme overrides.
Common mistake
An invalid substituted value can invalidate the declaration at computed-value time.
Verify the behavior
Remove the token, supply a valid color and supply an incompatible value. Inspect computed styles in each case.
Interview exercise
Add a fallback thoughtfully.
Answer and reasoning
Use var with a fallback for missing values, but validate token types because fallback does not correct every invalid supplied value.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.