CSS Interview Questions

It skips rendering work for offscreen content until needed, improving rendering performance for long pages.

contain restricts layout/paint/style scope for elements to improve rendering isolation and performance.

will-change hints future changes for optimization, but overuse can increase memory use. Apply sparingly and temporarily.

Animating transform/opacity is typically smoother and cheaper than animating layout-affecting properties like width or top.

Large paint areas, expensive shadows/filters, and layout thrashing can reduce smoothness.

Provide robust fallback stacks and font-display strategy to reduce invisible text and layout shifts.

It shows fallback text immediately while webfont loads, improving perceived performance.

Body text generally benefits from line-height around 1.4 to 1.7 depending on font and measure.

A typical target is ~45-75 characters per line to reduce eye strain and improve scanability.

They reduce cross-browser inconsistencies in default element styling, creating a predictable baseline.

Utility CSS emphasizes composition in markup, while semantic CSS uses named classes tied to components. Many projects combine both.

Small reusable classes can reduce duplication and improve consistency, especially in design systems.

Use root-level variables for tokens and override by theme scope ([data-theme="dark"]) for maintainable theming.

filter affects the element itself; backdrop-filter affects content behind the element.

Useful for decorative overlays that should not block clicks or interaction.