CSS Interview Questions & Answers

What is the CSS cascade?

Explain specificity in simple terms.

What does !important do, and when is it justified?

Author vs user vs user-agent stylesheets?

What are cascade layers (@layer)?

How does inheritance differ from the cascade?

What is the difference between unset, revert, and revert-layer?

How do inline styles interact with classes?

Shadow DOM and the cascade — what changes?

How would you debug a style that 'won't apply'?

What is @scope and why does it help?

Presentational class soup vs semantic classes — cascade implications?

Design a cascade strategy for a multi-brand design system.

What is the difference between .a .b and .a.b?

Explain child, sibling, and adjacent sibling combinators.

When do you use :is() vs :where()?

What does :has() enable?

Attribute selectors — equals vs contains vs prefix?

Pseudo-classes vs pseudo-elements?

Why prefer :focus-visible over :focus for outlines?

How do specificity traps happen with IDs in selectors?

What are structural pseudo-classes like nth-child useful for?

Selector performance myths — what matters today?

How do you style a form control only when invalid after interaction?

Explain :not() limitations and nesting.

Establish selector conventions for a large codebase.

Explain content-box vs border-box.

How do margin, padding, and border differ?

What is margin collapse?

What is a Block Formatting Context (BFC)?

How do width percentage and padding interact?

min-width/max-width vs width — when?

What does box-sizing inherit reset look like and trade-offs?

How do outlines differ from borders?

Explain overflow, scroll containers, and sticky pitfalls.

What is the visual viewport vs layout viewport conceptually?

How do you center a box horizontally and vertically (classic)?

Architect spacing tokens with the box model in mind.

What problem does flexbox solve?

main axis vs cross axis?

Explain flex-grow, flex-shrink, and flex-basis.

Why does min-width: auto cause flex overflow?

align-items vs align-content vs align-self?

How does flex-wrap change layout?

gap in flexbox — why prefer it over margins?

How do you build a sticky footer with flex?

order property — uses and a11y concerns?

flex shorthand pitfalls?

When is flex better than float-based layouts?

Responsive nav with flex — approach?

Design flex utilities for a design system.

What problem does CSS Grid solve?

fr units vs % vs auto in tracks?

Explain grid-template-areas.

auto-fit vs auto-fill?

How do implicit vs explicit grids differ?

alignment: justify-items vs justify-content in grid?

How do you overlap items intentionally?

subgrid — what is it for?

minmax and responsive card grids pattern?

Grid vs absolute positioning for dashboards?

Why does 1fr behave like minmax(auto, 1fr) and overflow?

Named lines — when useful?

Define a page layout system with grid areas.

What is responsive design vs adaptive design?

Explain mobile-first media queries.

Viewport meta tag — what does it do?

Container queries vs media queries?

Fluid typography approaches?

How do you choose breakpoints?

Responsive images in CSS context?

Common responsive nav patterns?

What are svh, lvh, dvh?

How do prefers-reduced-motion and prefers-color-scheme fit responsive thinking?

Debug a layout that breaks only between two widths.

Architect responsive tokens and breakpoints for a DS.

transition vs animation — when each?

Which properties are 'cheap' to animate?

Explain animation-fill-mode.

How do you respect prefers-reduced-motion?

easing functions — why not always linear?

How do you debug a transition that doesn't run?

What is @keyframes composition with multiple animations?

Scroll-driven animations — concept?

GPU layers and will-change pitfalls?

Design motion guidelines for a product.

How do enter/exit animations work with display:none?

FLIP technique at a high level?

What CSS patterns cause layout thrashing?

How does CSS affect rendering pipeline stages?

Critical CSS strategy?

Selector and stylesheet size — what to optimize?

contain and content-visibility benefits?

Font loading performance with CSS?

Why are large box-shadows/filters costly?

How do you find unused CSS?

CSS-in-JS runtime cost concerns?

image-set and CSS backgrounds performance?

Long lists: CSS techniques to help?

Set a CSS performance budget for a team.