MySmartCoPilot
Ask Passes Your pass 7 days left 1 day left Last day

Your country

Tools that support it use your country for local currency, number formats, units and paper size. Your choice is saved only in this browser.

CSS Module 14

Custom properties, nesting, scope and architecture interview questions

Interview questions on custom properties, nesting, scope and architecture: warm-ups, then what each harder question tests and how a good answer starts.

6 questions: 2 warm-ups and 4 with model answers · Levels: Fresher to staff

Warm-up questions

Short questions with short answers, each answered in full.

  1. Fresher to mid

    When does the fallback in var() apply?

    Answered in the lesson Custom properties (CSS variables)

  2. Mid to senior

    What does registering a custom property with @property change?

    Answered in the lesson Typed custom properties with @property

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

  1. Mid to senior

    A design system declares --brand and --link: var(--brand) on :root. A campaign page sets --brand on its .campaign wrapper, but the links inside keep the old colour. Explain why, fix it, and say how you would stop the next derived token from breaking the same way.

    What it tests
    When a var() inside a custom property is replaced, inheritance of computed values, and organising derived tokens so that themes and sections can change them.
    First step
    Find the element where --link is declared. Its var(--brand) is replaced there, on :root, at computed-value time, before anything is inherited, so every descendant inherits the finished colour and not the reference. The campaign's --brand never reaches --link.
    Follow-ups

    From the lesson Custom properties (CSS variables)

    Opening the model answers with your pass…

    Model answers open with any MySmartCoPilot pass.

    • Pro pass · 1 week₹79$2.99
    • 30 days₹179$5.99
    • 1 year₹1,699$45

    One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.

    Choose a passI have a licence key

    It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  2. Fresher to mid

    After a refactor, spacing tokens are bare numbers, such as --space-2: 8, and components write padding: var(--space-2)px. Every component lost its padding, yet DevTools shows no crossed-out declaration. What happened, and how should spacing tokens be stored?

    What it tests
    Token-by-token substitution, invalid at computed-value time against parse-time errors, calc() for adding units, and designing tokens that are hard to misuse.
    First step
    Read the declaration as the browser does after substitution: 8 followed by px is a number and a word, not the length 8px. The declaration contains var(), so it was accepted when the style sheet was parsed and DevTools does not cross it out; it fails at computed-value time and padding takes its initial value, 0.
    Follow-ups

    From the lesson Custom properties (CSS variables)

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  3. Mid to senior

    A gradient border driven by --angle turns smoothly in the design prototype, but on the production site it jumps once per turn, and in one browser it disappears. Production also loads a third-party widget. How do you find the cause, and what makes the animation robust?

    What it tests
    How registration fails silently, last-rule-wins and global registration, checking registration in DevTools, and fallbacks for engines without @property.
    First step
    Check whether --angle is registered at all on production: read it with getComputedStyle() on an element that does not set it. A registered property shows its initial value; an empty string means no valid registration, and a jump halfway through each turn is exactly what an untyped custom property does.
    Follow-ups

    From the lesson Typed custom properties with @property

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  4. Senior to staff

    Your component library exposes --card-radius and --card-accent to the apps that use it, and apps sometimes set them to wrong values, which breaks cards in odd ways. Would you register them with @property? What improves, what gets worse, and how would you roll the change out?

    What it tests
    Typed validation and its trade-offs, choosing inherits for a theming API, initial values as defaults, global names, and a careful rollout across many consuming apps.
    First step
    Separate the two failures. Unregistered, a wrong value breaks the property that uses it: the radius or the colour falls back to its initial value, so the card loses its corners or its accent. Registered, the custom property rejects the value itself and keeps a sensible default, so cards stay usable, but the mistake becomes silent.
    Follow-ups

    From the lesson Typed custom properties with @property

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

All CSS interview questions · The CSS track