CSS Interview Questions

• inline: flows with text, width/height mostly ignored.
• block: starts on new line, full width by default.
• inline-block: flows inline but accepts width/height.

:focus-visible shows focus style when keyboard-like navigation is detected.

It avoids removing focus indicators entirely while preventing noisy focus rings on mouse clicks.

Custom properties like --brand-color enable theme consistency and runtime updates.

They work especially well for design tokens and component systems.

This media feature detects user preference for reduced animation.

Use it to tone down or disable non-essential motion for accessibility.

Common causes are images without dimensions, async content injection, and late-loading fonts.

Mitigate by reserving space, setting width/height, and using stable placeholders.

Critical CSS is minimal above-the-fold styling inlined or prioritized to improve first render.

It can reduce render delay and improve perceived performance.

BEM (block__element--modifier) is a naming convention that keeps CSS predictable and scalable.

It reduces conflicts and clarifies component boundaries.

Container queries style components based on container size rather than viewport size.

They are useful for reusable components that appear in different layout regions.

It creates a new stacking context for an element.

This can prevent z-index conflicts in complex layered interfaces.

Frequent !important breaks normal cascade logic and makes styles hard to maintain.

Prefer better architecture, clearer selector strategy, and component boundaries.

Logical properties adapt to writing direction and are better for internationalized layouts than left/right-specific properties.

:where() adds no specificity, letting you write maintainable defaults that are easy to override.

:is() groups selector lists to reduce repetition while preserving specificity of the most specific argument.

Subgrid allows child grids to align to parent grid tracks, improving consistent layouts across nested components.

It reserves proportional space for media/components before content loads, reducing layout shift.