Question 16
What is the difference between `inline`, `block`, and `inline-block`?
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.
Question 16
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.Question 17
: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.
Question 18
Custom properties like --brand-color enable theme consistency and runtime updates.
They work especially well for design tokens and component systems.
Question 19
This media feature detects user preference for reduced animation.
Use it to tone down or disable non-essential motion for accessibility.
Question 20
Common causes are images without dimensions, async content injection, and late-loading fonts.
Mitigate by reserving space, setting width/height, and using stable placeholders.
Question 21
Critical CSS is minimal above-the-fold styling inlined or prioritized to improve first render.
It can reduce render delay and improve perceived performance.
Question 22
BEM (block__element--modifier) is a naming convention that keeps CSS predictable and scalable.
It reduces conflicts and clarifies component boundaries.
Question 23
Container queries style components based on container size rather than viewport size.
They are useful for reusable components that appear in different layout regions.
Question 24
It creates a new stacking context for an element.
This can prevent z-index conflicts in complex layered interfaces.
Question 25
Frequent !important breaks normal cascade logic and makes styles hard to maintain.
Prefer better architecture, clearer selector strategy, and component boundaries.
Question 26
Logical properties adapt to writing direction and are better for internationalized layouts than left/right-specific properties.
Question 27
:where() adds no specificity, letting you write maintainable defaults that are easy to override.
Question 28
:is() groups selector lists to reduce repetition while preserving specificity of the most specific argument.
Question 29
Subgrid allows child grids to align to parent grid tracks, improving consistent layouts across nested components.
Question 30
It reserves proportional space for media/components before content loads, reducing layout shift.