Advanced everything in CSS & Design Systems, page 2
Should a component own its outer spacing?
Components own internal padding but should not own external margin; the parent or layout owns spacing between siblings, keeping components context-independent.
What are CSS variable fonts?
One file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
What is a CSS containing block?
Containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport.
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?
Tests intrinsic sizing and responsive tracks without media queries. A strong answer gives repeat(auto-fit, minmax(250px, 1fr)), noting repeat generates tracks, auto-fit collapses empties, and minmax sets a floor with fractional growth.
Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?
This tests clamp() fluency for viewport-relative type scaling without media queries. A strong answer states clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px) and explains the slope math. A red flag is multiple media queries or calc() without clamp().
What are CSS container queries and what problem do they solve?
This tests component-level responsive awareness. A strong answer states container queries style elements based on their container size, letting components adapt regardless of viewport. Red flag: believing media queries alone solve component context adaptation.
How can CSS aspect-ratio and modern layout properties prevent CLS?
Set width/height attributes, use CSS aspect-ratio for responsive scaling, and reserve container space with min-height.
How do min-content, max-content, and fit-content work in CSS Grid?
It tests intrinsic track sizing. A strong answer defines min-content as the smallest no-overflow width, max-content as widest no-wrap width, and fit-content as clamped max-content; then shows labels hugging longest word.
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?
This tests the boundary between author CSS and browser chrome. color-scheme lets the UA recolor native UI like scrollbars and form controls automatically, while prefers-color-scheme styles custom components.
How do you create gradient text in CSS?
Set a gradient background-image, use background-clip: text to clip to glyphs, and color: transparent to reveal it.
Explain :is() vs :where() specificity and when to pick :where()
Tests whether you treat specificity as architecture, not just syntax. :where() has zero specificity; :is() adopts the most specific argument's weight. Choose :where() for base resets or utility classes designed to be overridden. Red flag: calling them equal.
Design System Dependency Update Automation
Automating dependency updates pushes design system releases to apps without manual pull requests. It matters when token changes must reach dozens of repositories at once. The footgun is automating bumps without visual regression, which silently breaks UI.
CSS Houdini: Extending the CSS Engine
CSS Houdini gives developers low-level access to the browser's rendering engine, letting you write your own CSS features. Use it to polyfill new CSS or define type-safe custom properties with @property, preventing invalid values from being silently ignored.
CSS Anchor Positioning: Beyond the Containing Block
CSS Anchor Positioning lets you tether an element to any other element, not just its parent. Use it for popovers or tooltips that automatically reposition to stay in view. The footgun is forgetting to explicitly name your anchor with anchor-name.
View Transitions API: Animate Between DOM States
The View Transitions API lets the browser handle complex animations between page states. It simplifies transitions in Single-Page Apps and, for the first time, enables them for Multi-Page Apps. The main footgun is forgetting it's a progressive enhancement.
Web Workers: Offload Heavy Tasks from the UI Thread
Web Workers run JavaScript on a background thread, preventing heavy tasks from freezing your UI. Use them for complex calculations or data processing that shouldn't block rendering.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles