Top 30 Advanced CSS & Design Systems Interview Questions and Answers
30 advanced multiple-choice CSS & Design Systems interview questions, the deep end: internals, failure modes, and the design calls a senior engineer is expected to defend. They come from 30 bites in the CSS & Design Systems library, the hardest slice of the 132 CSS & Design Systems interview questions in the library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
Tailwind, CSS, accessibility, design tokens
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
A design system groups element selectors for a global reset. Developers complain that single-class utilities cannot override it. Switching from :is() to :where() fixes this because...
Show the answer
Answer: b · :where() has zero specificity, while :is() takes on the specificity of its most specific argument
:where() always has zero specificity, so a single class easily overrides it, whereas :is() inherits the most specific argument's weight, creating a barrier. Option D is tempting because it admits :where() is lower but incorrectly claims it still carries element-level weight rather than zero.
Read the full bite: Explain :is() vs :where() specificity and when to pick :where()
Question 2 of 30
An element with position: absolute has its offsets computed relative to which box?
Show the answer
Answer: a · The padding box of the nearest ancestor whose position is not static
Absolutely positioned elements resolve against the nearest positioned ancestor's padding box, not necessarily the direct parent. The viewport rule is for fixed, and the normal-flow ancestor rule applies to static and relative elements.
Question 3 of 30
A heading has background-image: linear-gradient(gold, purple) and background-clip: text applied, yet the text still appears solid black. What is the root cause?
Show the answer
Answer: b · The foreground text color remains opaque and paints over the clipped background layer
The card states that foreground text color sits above the background in stacking order, so an opaque text fill completely obscures the clipped gradient unless color is transparent. Option C is a tempting distractor because candidates often confuse background-origin, which controls positioning, with background-clip, which controls the painting area.
Question 4 of 30
When controlling a variable font, why prefer font-weight over font-variation-settings where both can set weight?
Show the answer
Answer: b · High-level properties integrate with the cascade and inheritance more predictably
Dedicated properties like font-weight map to axes while participating cleanly in the cascade and animation, so they are preferred. font-variation-settings can set wght but is a low-level escape hatch, not faster or print-only.
Question 5 of 30
You set color-scheme: light dark on :root and use prefers-color-scheme for custom tokens, but a browser forced dark mode breaks your hero section. What is the most targeted fix?
Show the answer
Answer: a · Add color-scheme: only light to the hero section to prevent UA overrides
The only keyword explicitly forbids the UA from overriding an element's color scheme, making it the correct tool to opt a specific component out of a forced dark mode. A prefers-color-scheme media query cannot block browser overrides because it only lets authors react to the user's preference, not control native UI recoloring.
Question 6 of 30
In a nested CSS grid, what fundamentally prevents a grandchild element from aligning to the outer grid's tracks without using subgrid?
Show the answer
Answer: b · The inner grid establishes its own independent track list, isolating its children from the parent's grid lines.
The inner grid creates its own independent track list, so its children have no knowledge of the outer grid's lines. Distractor D is tempting because identical fraction values appear to create alignment, but independent track contexts mean the grids remain isolated regardless of the units used.
Read the full bite: What problem does subgrid solve? Give a concrete example.
Question 7 of 30
When a CSS Grid container lacks sufficient horizontal space, how does a fit-content track behave compared to a max-content track?
Show the answer
Answer: a · fit-content is clamped by the container's available space and can compress to min-content, while max-content demands the full unwrapped width even if it overflows
fit-content caps expansion at the container's available space but can still compress to min-content, whereas max-content always takes the content's full unwrapped width regardless of overflow. Option B is tempting because it confuses fit-content with auto, which distributes leftover space and can grow beyond max-content, while fit-content hard-caps growth.
Read the full bite: How do min-content, max-content, and fit-content work in CSS Grid?
Question 8 of 30
When preventing CLS in a responsive CSS Grid of images with known build-time dimensions, which approach is most robust?
Show the answer
Answer: a · Include HTML width and height attributes on images, ensure grid-template-rows respects intrinsic ratios, and use CSS aspect-ratio for dynamic elements
HTML width and height attributes provide the earliest aspect-ratio signal before download, and combining them with grid row sizing plus CSS aspect-ratio for dynamic elements prevents collapse at every stage. Option C is tempting but wrong because aspect-ratio alone lacks the early HTML signal and does not stop grid rows from collapsing to zero before content arrives.
Read the full bite: How can CSS aspect-ratio and modern layout properties prevent CLS?
Question 9 of 30
A reusable card must switch layout when placed in a sidebar or main area on the same screen. Which approach correctly handles this?
Show the answer
Answer: c · Set container-type: inline-size on the card's wrapper and use an @container rule to style it when the wrapper exceeds 400 pixels
Option C is correct because it establishes a containment context with container-type so the browser tracks the wrapper's dimensions, letting the component adapt independently of viewport size. Option B is tempting but wrong: viewport media queries cannot distinguish between a sidebar and main area on the same screen, forcing brittle page-specific overrides.
Read the full bite: What are CSS container queries and what problem do they solve?
Question 10 of 30
Which single declaration produces fluid typography that is exactly 16px at 400px viewport, exactly 24px at 1200px viewport, and never exceeds those bounds?
Show the answer
Answer: c · font-size: clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px)
Option C correctly normalizes the viewport by subtracting 400px, divides by the 800px range, and enforces bounds with clamp(). Option A lacks clamp() and allows unbounded growth, while B miscalculates the y-intercept by omitting the viewport offset and D uses the wrong denominator.
Question 11 of 30
A developer notices unwanted invisible gaps at the end of rows when using grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Which single change fixes this while keeping the layout responsive?
Show the answer
Answer: c · Replace auto-fill with auto-fit
auto-fit collapses empty repeated tracks to zero width, causing the remaining items to expand and fill the row, while auto-fill preserves invisible tracks at the end of the row. Replacing 1fr with a fixed maximum would prevent responsive expansion and would not remove the empty track gaps.
Read the full bite: Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?
Question 12 of 30
You need to programmatically pause, seek, and change playback rate of an animation driven by a container's scroll position while keeping the work compositor-only. Which approach fits?
Show the answer
Answer: a · Create the animation with the Web Animations API and assign it a ScrollTimeline instance
The Web Animations API paired with ScrollTimeline gives imperative control over playback rate, pausing, and seeking while the browser runs the animation on the compositor. Option B is declarative CSS, which synchronizes to scroll but does not expose those programmatic controls, and option C thrashes layout on the main thread.
Read the full bite: How do you programmatically sync CSS animation progress to scroll?
Question 13 of 30
Which pattern best respects prefers-reduced-motion while preserving essential functional feedback?
Show the answer
Answer: a · Make decorative motion opt-in with the media feature and convert functional motion to instant state changes or static equivalents
The correct strategy scopes decorative motion inside @media (prefers-reduced-motion: no-preference) so it is opt-in, while preserving functional cues by making them instant or replacing them with static indicators. Option C is tempting because wrapping in no-preference is correct for decorative motion, but suppressing all visual changes removes essential feedback like loading states.
Read the full bite: How should you adapt animations for prefers-reduced-motion?
Question 14 of 30
A team needs to make all feedback animations faster while keeping navigation timing unchanged; which token strategy achieves this?
Show the answer
Answer: c · Update the feedback-duration semantic alias while leaving navigation-duration intact
Updating the feedback-duration semantic alias retargets every feedback component without affecting navigation, because semantic tokens separate intent from raw primitives. Reducing the underlying 300ms primitive globally would also speed up navigation animations that reference it, violating the requirement.
Read the full bite: How do you structure and tokenize animation and transition values?
Question 15 of 30
Following OOCSS, which spacing should a reusable component own, and which should it leave to the parent?
Show the answer
Answer: d · Own internal padding, leave spacing between siblings to the parent layout
Padding is intrinsic and consistent, so the component owns it; spacing between siblings is context-dependent, so a parent layout owns it, keeping the component portable. Owning outer margins couples the component to one context and causes collapse and double-spacing bugs.
Read the full bite: Should a component own its outer spacing?
Question 16 of 30
Which bundle-size dynamic most accurately contrasts utility-first CSS with hand-written semantic CSS?
Show the answer
Answer: a · Utility frameworks purge unused classes, while semantic CSS tends to accumulate dead rules without tooling
Utility frameworks generate only used classes after purging, keeping bundles lean, whereas hand-authored semantic CSS often grows and retains dead rules unless actively tooled. Class-name length and the claim of no impact misjudge what drives CSS payload.
Read the full bite: Utility-first versus semantic CSS trade-offs
Question 17 of 30
What is the key specificity difference between :is() and :where()?
Show the answer
Answer: c · :is() takes its most specific argument's specificity, while :where() always contributes zero
:is() inherits the specificity of its most specific selector, whereas :where() always adds zero, making it ideal for easily overridable defaults. The reversed and equal-behavior options misstate this core distinction.
Read the full bite: Using :is() and :where() to manage specificity
Question 18 of 30
Why emit theme values as CSS custom properties rather than relying solely on Sass variables for a light/dark mode system?
Show the answer
Answer: b · Custom properties resolve at runtime, so themes switch without recompiling
CSS custom properties resolve in the browser, so a single attribute change reskins the page with no rebuild. Sass variables resolve at compile time, so changing them requires recompiling and shipping new CSS.
Question 19 of 30
Your CSS is large mostly because most selectors are never matched in production. Which technique most directly attacks that root cause?
Show the answer
Answer: d · Removing unused selectors with PurgeCSS against real templates
Purging unused selectors removes the dead rules that are the actual bulk of the bundle. Minification only compresses what remains, so it cannot reclaim the weight of rules nothing references.
Question 20 of 30
What is the central reason a PostCSS plugin parses CSS into an AST instead of running a regular expression over the source text?
Show the answer
Answer: d · AST traversal safely targets specific nodes like declarations without corrupting comments or urls
Walking the parsed AST lets the plugin operate on exactly the right declaration nodes while leaving comments, urls, and unrelated tokens intact. Raw regex over text easily mangles those edge cases.
Read the full bite: Build a custom PostCSS plugin (px to rem)
Question 21 of 30
A team needs a one-off deviation. Which approach best supports them without harming the shared design system?
Show the answer
Answer: d · Use sanctioned escape hatches and keep the one-off in the consuming app, tracked as an exception
Escape hatches plus app-local, documented one-offs let the team deviate without polluting the shared system. Forking, editing the core, or using !important spread maintenance debt to every consumer.
Read the full bite: Support a one-off that deviates from the system
Question 22 of 30
What is the main downside of versioning a design system as a single monolithic package?
Show the answer
Answer: c · Any change bumps the whole library, forcing consumers to absorb unrelated updates
With one version, even an isolated fix bumps the entire library, so consumers inherit unrelated and possibly breaking changes. Independent versioning addresses this but adds tooling and dependency complexity.
Question 23 of 30
In a token-based theming architecture, why should components reference semantic tokens rather than primitive tokens?
Show the answer
Answer: b · Semantic tokens let a theme remap meaning-to-palette in one place, keeping components theme-agnostic
Semantic tokens decouple components from specific values; a theme just remaps semantics to different primitives, reskinning everything without touching components. Reading primitives directly hardwires colors and breaks theming.
Question 24 of 30
In a white-label multi-brand token system, what stays constant across all brands so components remain brand-agnostic?
Show the answer
Answer: c · The shared set of semantic token names that components consume
A fixed semantic contract lets each brand supply different primitives and mappings while components reference stable names. The raw values and bundles differ per brand precisely because they sit below that shared contract.
Read the full bite: Token architecture for white-label multi-brand
Question 25 of 30
What is the advantage of emitting a responsive token as one custom property redefined inside media queries, versus one token per breakpoint?
Show the answer
Answer: a · Components reference a single var and get the right value per viewport, keeping responsive logic out of components
Redefining one custom property inside media queries means each component just uses one var and inherits the correct value automatically. Separate per-breakpoint tokens force every component to write its own media queries.
Question 26 of 30
What is the main risk of running design tokens and Tailwind's theme as two separate, parallel systems?
Show the answer
Answer: d · The two value sets drift apart, producing inconsistent UI and double maintenance
Without one source of truth, the token values and Tailwind's theme inevitably diverge, causing inconsistency and duplicated upkeep. Generating Tailwind's theme from tokens keeps both in sync.
Read the full bite: Integrating design tokens with Tailwind CSS
Question 27 of 30
When implementing a polymorphic component via an as prop in TypeScript, what is the main reason to make the props generic over the rendered element type?
Show the answer
Answer: a · It lets valid element-specific props like href or type be type-checked
Generic element typing infers the correct props for each as value, so href is valid for an anchor and type for a button. It is purely compile-time and does not affect bundle size or ref forwarding, which still requires forwardRef.
Question 28 of 30
Which mechanism can intentionally cross the Shadow DOM boundary to let an app theme an encapsulated web component?
Show the answer
Answer: d · CSS custom properties read inside the shadow tree
Custom properties (and ::part) deliberately pierce the boundary, so a component can read app-provided tokens. Global selectors, resets, and CSS Modules class names stay in the light DOM and cannot reach shadow content.
Question 29 of 30
For an editable autocomplete combobox, why is aria-activedescendant often preferred over moving real DOM focus into the listbox?
Show the answer
Answer: b · It keeps the caret and focus in the input so the user can keep typing
With aria-activedescendant, DOM focus stays in the text input, so typing continues uninterrupted while a referenced option is highlighted. Moving focus into the list breaks typing. It does not handle scrolling automatically nor replace aria-expanded.
Read the full bite: Building an accessible combobox with ARIA
Question 30 of 30
When honoring prefers-reduced-motion for JavaScript-driven animations, why should you attach a change listener to the matchMedia query?
Show the answer
Answer: d · Because the user may toggle the OS setting during the session
A change listener lets the app respond if the user enables or disables reduced motion mid-session. matchMedia returns the current value immediately, and the listener is about reacting to later changes, not performance.
Read the full bite: Respecting prefers-reduced-motion in a design system
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.