Declaring and scoping CSS custom properties

WHAT THIS TESTS: This checks that you know CSS custom properties are runtime, cascading, inheritable values rather than preprocessor constants. It also probes your mental model of scope and the cascade.

A GOOD ANSWER COVERS: You declare a custom property by prefixing the name with two dashes, for example --brand-color: #6344D6, placed inside a selector block. You read it with the var() function, optionally giving a fallback, such as color: var(--brand-color, black). A property declared on :root attaches to the document root, so it is inherited by every element and acts as a global default. The same property name declared on a component class sets a new value for that element and its descendants only, shadowing the global value within that subtree. Because they participate in the cascade and inheritance, custom properties are dynamic: you can override them with a media query, a parent class, or JavaScript at runtime.

COMMON WRONG ANSWERS: Saying they are identical to Sass variables, which are resolved and stripped at compile time and cannot change per element or at runtime. Forgetting the var() function and writing the raw name as a value. Assuming :root and a class behave the same way regarding inheritance.

LIKELY FOLLOW-UPS: How do fallbacks work, and can you nest var() inside another var(). How would you flip a theme by overriding properties on a body class or with prefers-color-scheme. Why do invalid custom property values use the guaranteed-invalid value and fall back differently from normal properties.

ONE CONCRETE EXAMPLE: Define --space: 16px on :root so the whole page shares a default gap. On a compact .card class, redeclare --space: 8px; every var(--space) inside that card now resolves to 8px while the rest of the page keeps 16px, all without any JavaScript or recompilation.