Question 1

What CSS patterns cause layout thrashing?

Accepted Answer

Forcing sync layout by reading geometry then writing styles in loops; animating layout props. Batch reads/writes. Prefer transforms. Use DevTools performance panel.

Question 2

How does CSS affect rendering pipeline stages?

Accepted Answer

Styles → layout → paint → composite; some changes skip earlier stages. Knowing what invalidates helps choose properties (transform vs top).

Question 3

Critical CSS strategy?

Accepted Answer

Inline minimal above-the-fold CSS; defer the rest; avoid huge inlined blobs. Automate extraction carefully. Reassess as designs change.

Question 4

Selector and stylesheet size — what to optimize?

Accepted Answer

Remove dead CSS, split by route, avoid huge unused frameworks on critical path. Purge carefully with dynamic class names. Compression + caching matter.

Question 5

contain and content-visibility benefits?

Accepted Answer

Hint browsers to isolate layout/paint work; skip rendering offscreen content. content-visibility:auto can boost long pages. Need contain-intrinsic-size to reduce scrolljump.

Question 6

Font loading performance with CSS?

Accepted Answer

font-display strategies, subsetting, preload, limit weights. FOIT/FOUT trade-offs. System font stacks for speed when brand allows.

Question 7

Why are large box-shadows/filters costly?

Accepted Answer

They can expand paint areas and be expensive on scroll/animate. Prefer simpler shadows; animate opacity/transform on pre-promoted layers.

Question 8

How do you find unused CSS?

Accepted Answer

Coverage tool, PurgeCSS/UnCSS with caveats, design-system adoption metrics. Dynamic classes and runtime CSS-in-JS complicate static purge.

Question 9

CSS-in-JS runtime cost concerns?

Accepted Answer

Runtime injection/hashing can cost CPU and delay paint vs static extraction. Prefer zero-runtime or build-time extraction for critical UI when possible.

Question 10

image-set and CSS backgrounds performance?

Accepted Answer

Offer resolution/format alternatives; still prefer HTML img for content LCP. Don't hide LCP content in CSS backgrounds.

Question 11

Long lists: CSS techniques to help?

Accepted Answer

content-visibility, virtualization (JS), avoid expensive per-item effects. Pure CSS can't fully virtualize like windowing libraries.

Question 12

Set a CSS performance budget for a team.

Accepted Answer

Max critical CSS KB, banned properties for animation, lint rules, monitoring CLS/INP. Encode in CI. Review third-party CSS.

Performance CSS Interview Questions

Other CSS interview topics