CSS Interview Prep

What is the CSS box model?

What is the difference between `box-sizing: content-box` and `box-sizing: border-box`?

What is margin collapsing and when does it occur?

How do negative margins work, and how do they differ from positive margins?

Explain how percentage-based padding is calculated. Why does `padding-top: 50%` not reference the height?

What happens when you set `width: 100%` on an element with padding and no `border-box`? How can this cause overflow?

What is CSS specificity and why does it matter?

How do you calculate the specificity of a complex selector?

Why is using `!important` considered bad practice, and when might it be justified?

Explain the difference in specificity between `:is()`, `:not()`, `:has()`, and `:where()`. How does each affect the cascade?

How does specificity interact with the CSS cascade layers (`@layer`) introduced in CSS Cascade Layers?

Walk through the full cascade algorithm. In what order does the browser evaluate origin, importance, layer, specificity, and source order?

How can a selector with no IDs ever override a selector with an ID, without using `!important`?

What is the difference between `display: block`, `display: inline`, and `display: inline-block`?

What is the normal document flow in CSS, and which elements participate in it?

What is a Block Formatting Context (BFC) and what are the practical effects of establishing one?

Explain how `display: contents` works. What are its use cases and accessibility pitfalls?

What is the stacking context and how does `display` interact with `z-index` to create one?

What is the difference between `position: relative` and `position: absolute`?

What does `position: sticky` do, and what are the requirements for it to work?

How does `position: fixed` differ from `position: absolute`, and when can `fixed` not be relative to the viewport?

Explain the `inset` shorthand and how `position: absolute; inset: 0` creates a full-coverage overlay.

What is a containing block, and how does the positioned ancestor chain affect where an absolutely positioned element lands?

What is the difference between `px`, `em`, `rem`, and `%` units in CSS?

What are viewport units (`vh`, `vw`, `dvh`, `svh`, `lvh`) and when would you choose one over another?

Explain how `clamp()`, `min()`, and `max()` work. What are their advantages over media query breakpoints for fluid typography?

What happens when you use `em` units for `padding` inside an element that also uses `em` for `font-size`? Explain the resolution chain.

Which CSS properties are inherited by default, and how do `inherit`, `initial`, `unset`, and `revert` differ?

Explain how `all: unset` works. What are the dangers of using it, and how does it interact with inherited vs. non-inherited properties?

How does CSS custom property (`--var`) inheritance work differently from normal property inheritance? Can you break inheritance of a custom property?

What does `flex: 1` actually expand to?

What is the difference between `justify-content` and `align-items` in flexbox?

What does `flex-wrap: wrap` do and when would you use it?

How does `flex-shrink` interact with `min-width` and intrinsic content size?

Explain the difference between `align-items` and `align-self` in flexbox.

What happens when you use `gap` with flexbox and how does it differ from using margins?

How does `flex-basis` interact with `width` and what takes priority?

Walk through the flexbox sizing algorithm: how does the browser determine final item sizes?

How do you handle flexbox layouts where items have unpredictable content lengths without breaking the layout?

What is the `fr` unit in CSS Grid and how does it work?

How do you place an item in a specific grid cell?

What does `grid-template-areas` do and when is it useful?

Explain the difference between `auto-fill` and `auto-fit` in `repeat()`.

How do implicit grid tracks work and how do you control their sizing?

What is `minmax()` in CSS Grid and what are common patterns for using it?

How does `grid-column: 1 / -1` work and why is it useful?

How does the CSS Grid auto-placement algorithm work and what does `dense` packing do?

How do subgrid works and what problem does it solve?

What is a media query and what are the most commonly used breakpoints?

What is the `viewport` meta tag and why is it essential for responsive design?

How do CSS `clamp()`, `min()`, and `max()` enable responsive design without media queries?

What is the difference between responsive images using `srcset` with width descriptors versus CSS-only approaches?

How do you build a truly fluid layout system that handles every screen size without breakpoints?

How do you handle responsive typography at scale, including line length control and vertical rhythm?

What are container queries and how do they differ from media queries?

How does container query size containment work under the hood and what are its limitations?

What are CSS logical properties and why should you use them?

How do logical properties interact with the full CSS layout system including transforms, positioning, and scroll behavior?

What does the `:nth-child()` pseudo-class do, and how does the `An+B` syntax work?

What is the difference between the `>` (child combinator) and the ` ` (descendant combinator) in CSS selectors?

Explain the `:is()` and `:where()` pseudo-class functions. How do they differ?

How does the `:has()` pseudo-class work, and why is it called the "parent selector"?

What is the `:not()` pseudo-class and how does its specificity behave in CSS Selectors Level 4?

How do attribute selectors work, and what are the substring-matching variants?

How does `:has()` enable complex conditional styling, and what are its performance implications?

What are CSS custom properties (variables) and how do you declare and use them?

How does the fallback mechanism work in the `var()` function?

How does custom property scoping and inheritance work, and how can you prevent inheritance?

How do CSS custom properties interact with the CSSOM and JavaScript at runtime?

How can you animate CSS custom properties, and why does `@property` registration matter?

How does the `@property` at-rule enable type-safe theming systems, and what are the edge cases?

What is the difference between CSS `transition` and `animation`, and when should you use each?

What are the different `animation-fill-mode` values and why do they matter?

What triggers layout, paint, and composite in the browser rendering pipeline, and how does this affect animation performance?

How do CSS `@keyframes` work with multiple stops, and how does `animation-timing-function` apply to each segment?

How do you use the Web Animations API alongside CSS animations, and what advantages does it offer?

How do scroll-driven animations work with `animation-timeline`, and how do they differ from scroll-triggered animations?

How do the `@starting-style` rule and `transition-behavior: allow-discrete` enable transitions on display changes?

What are `::before` and `::after` pseudo-elements, and what is the `content` property's role?

How do `::marker`, `::placeholder`, and `::selection` pseudo-elements work, and what are their styling limitations?

How do the `::part()` and `::slotted()` pseudo-elements enable styling within Shadow DOM boundaries?

What is CSS Container Queries and how does `@container` differ from `@media` queries?

How does CSS Nesting work natively, and what are the differences from preprocessor nesting?

What is the BEM naming convention and why is it used?

What is ITCSS and how does it organize stylesheets?

Compare CSS Modules, BEM, and CSS-in-JS as styling approaches for component-based architectures.

How do utility-first frameworks like Tailwind differ architecturally from component-based CSS methodologies?

Design a CSS architecture strategy for a large multi-team design system that must scale across dozens of applications.

What is critical CSS and why does it matter for performance?

Explain the browser rendering pipeline and how CSS properties affect each stage.

How do CSS selectors impact rendering performance and what is the browser matching algorithm?

How does the CSS `contain` property improve rendering performance and what are its containment modes?

How do `will-change` and layer promotion work, and what are the risks of overusing them?

Explain how `content-visibility`, `contain-intrinsic-size`, and lazy rendering work together to optimize long pages.

What is CSS specificity and how is it calculated?

How do CSS cascade layers (`@layer`) help manage specificity at scale?

Explain the `:where()` and `:is()` pseudo-classes and their role in specificity management.

Design a specificity strategy for a design system that supports theming, component variants, and consumer overrides without `!important`.

How does the `@scope` rule work and how does it change CSS architecture for nested components?

What is PostCSS and how does it fit into a CSS build pipeline?

Compare CSS preprocessors (Sass, Less) with modern native CSS features — which preprocessor features are now redundant?

How do you configure Stylelint or a CSS linter to enforce architectural rules like token usage and selector conventions?

How would you set up CSS bundle analysis, tree-shaking, and dead code elimination for a production application?

How do `prefers-reduced-motion` and `prefers-color-scheme` affect CSS architecture, and how should a design system handle these preferences?

How do you architect CSS to meet WCAG contrast, focus visibility, and spacing requirements without sacrificing design flexibility?