Css Interview Questions

Understand how a timing function maps elapsed time to progress, what each keyword expands to, and how to read and design a cubic-bezier curve.

Compare state-change interpolation with keyframe-driven playback, and learn which one each real interaction actually needs.

Use animation-play-state, animation-direction, delays, and animationend to control playback and sequence multiple animations.

Trace the browser rendering pipeline to see why only two properties can animate on the compositor, and what animating width or top costs instead.

Trace the specificity escalation spiral from the first failed override to an !important-saturated codebase, and compare the mechanisms that stop it.

Compare composing from single-purpose utilities against writing scoped semantic rules, on bundle size, refactoring cost, and where each one breaks down.

Learn the Block Element Modifier convention, why flat single-class selectors keep specificity constant, and where BEM still applies in a component-framework world.

Walk the full cascade resolution order to see what decides a conflict once specificity ties, and why bundle order matters more than file order.

Learn how @layer creates explicit precedence buckets that outrank specificity, and how it ends the specificity escalation spiral.

Learn the three-column specificity calculation, where inline styles and !important sit in the cascade, and why specificity is only one tiebreaker among several.

Both flatten selector lists identically, but :is() takes the specificity of its most specific argument while :where() is always zero.

Understand where a custom property resolves, why inheritance makes subtree overrides work, and the patterns for scoping and exposing component tokens.

Compare a build-time text substitution with a live, inherited, runtime value that JavaScript can read and change.

Design a full theming system: semantic tokens, prefers-color-scheme defaults, a manual override attribute, no-flash hydration, and color-scheme for native UI.

Walk through the flex sizing algorithm step by step, from flex-basis as the starting size to the proportional distribution of free or negative space.

Diagnose the automatic minimum size on flex items, why min-width: auto blocks shrinking, and the overrides that let a flexible region actually flex.

Learn how flex-direction defines the two axes and why every alignment property in Flexbox is meaningless until you know which axis it targets.

Compare the two core Flexbox alignment properties by axis, by what they distribute, and by how their values differ.

Centre with Flexbox in two declarations, then compare Grid place-items and absolute positioning with transform on tradeoffs that actually matter.

See exactly how border-box redefines the width property, why it makes layouts composable, and where it can still bite you.

Understand the four layers every element renders as, and how the two box-sizing modes change what width means.

Understand the three collapsing cases, why parent-child collapsing surprises people most, and the modern ways to stop it.

Learn where each lives in the box model, how their behaviour diverges, and the concrete cases where swapping them breaks a layout.

Walk the full pipeline from DOM to screen, see where each property enters, and derive the animation cost hierarchy from first principles.

Learn how content-visibility: auto skips layout and paint for off-screen subtrees, why contain-intrinsic-size is mandatory, and what it costs in searchability.

Understand forced synchronous layout, the read-write interleaving that triggers it, and the batching and containment strategies that eliminate it.

Compare the one-dimensional and two-dimensional layout models, then apply a concrete decision rule based on who controls the sizing.

See how ASCII-art region names make a layout self-documenting, and how they let you rearrange a whole page at a breakpoint by rewriting one property.

Learn how track lists are declared, what the fr unit actually divides, and how minmax() prevents the overflow that plain fr causes.

Learn what the explicit grid declares, how the implicit grid absorbs everything else, and why grid-auto-rows exists.

Build the one-line responsive grid, then understand exactly how auto-fit differs from auto-fill and when each is correct.

Compare all five position values by whether they stay in flow, what they are offset from, and what each one is actually good for.

Understand how stacking contexts isolate z-index into local scopes, which properties create them, and how the paint order actually works.

Understand sticky as a relative-fixed hybrid bounded by its parent, and diagnose the overflow, height, and threshold conditions that silently disable it.

Work through the five real reasons a z-index is ignored, from missing positioning to ancestor stacking contexts and overflow clipping.

Learn the three arguments of clamp(), how the preferred value produces continuous scaling, and the accessibility rule for using it with type.

Learn how container queries let a component respond to its own available width, why containment must be opted into, and where media queries still belong.

Compare absolute and relative CSS units by what they resolve against, and learn the accessibility and compounding consequences of each choice.

Compare min-width and max-width strategies by their base styles, override direction, and what each one does to specificity and performance.

Learn how :has() lets a parent be styled based on its descendants, replacing a whole category of JavaScript class toggling.

Three focus pseudo-classes with three different jobs, and the accessibility reason :focus-visible exists at all.

One counts every sibling, the other counts only siblings of the same element type. See exactly where they diverge and what the of S syntax adds.

One selects existing elements in a particular state, the other creates a sub-part that is not in the DOM. Learn the syntax, specificity, and limits of each.