More in CSS & Design Systems — page 5
What is a CSS pre-processor?
WHAT IT TESTS: basics of authoring tooling. OUTLINE: a pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
Using :is() and :where() to manage specificity
WHAT IT TESTS: modern selector specificity control. OUTLINE: :is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults.
Utility-first versus semantic CSS trade-offs
WHAT IT TESTS: balanced CSS architecture judgment. OUTLINE: utility-first gives speed, small purged bundles, and no naming overhead but verbose markup; semantic BEM gives readable markup and clear boundaries but naming and dead-CSS risk.
Should a component own its outer spacing?
WHAT IT TESTS: spacing ownership in design systems. OUTLINE: components own internal padding but should not own external margin; the parent or layout owns spacing between siblings, keeping components context-independent.
Explain the inverted triangle of ITCSS
WHAT IT TESTS: managing the cascade at scale. OUTLINE: ITCSS orders layers from far-reaching low-specificity (settings, tools, generic) down to localized high-specificity (components, utilities), so specificity climbs gradually.
How custom properties enable dynamic theming
WHAT IT TESTS: runtime theming with CSS variables. OUTLINE: custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var().
What are the two principles of OOCSS?
WHAT IT TESTS: reusable CSS architecture thinking. OUTLINE: separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently.
Explain the BEM naming convention
WHAT IT TESTS: scalable CSS class naming. OUTLINE: Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat.
What are CSS variable fonts?
WHAT IT TESTS: modern web typography and performance. OUTLINE: one file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
What is a CSS containing block?
WHAT IT TESTS: how percentages and offsets are resolved in layout. OUTLINE: containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport.
Pseudo-class versus pseudo-element in CSS
WHAT IT TESTS: precise CSS selector vocabulary. OUTLINE: pseudo-classes target an element in a state, pseudo-elements style a generated or sub-part using double colons, and ::before injects decorative content.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.
How should you adapt animations for prefers-reduced-motion?
WHAT IT TESTS: Vestibular accessibility and media ergonomics. ANSWER OUTLINE: Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible. RED FLAG: Ignoring the setting or using JS instead of CSS media features.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
CSS will-change: purpose, appropriate use, and overuse consequences
Tests whether you know will-change is a last-resort hint, not a default. Strong answers: hint imminent changes, toggle via script, and warn that overuse wastes memory. Red flag: leaving it in CSS permanently or applying it preemptively to many elements.
Create a staggered list fade-in using only CSS
Tests CSS animation orchestration via keyframes and delay strategies. Great answers use :nth-child or --index variables for scalable staggering, set fill-mode forwards, and honor prefers-reduced-motion.
Why is animating transform preferred over top or margin-left?
WHAT IT TESTS: grasp of the rendering pipeline and frame rate. A strong answer says transform skips layout and runs on the compositor, while top and margin-left force layout and drop frames. RED FLAG: claiming both are equally fast or that only syntax differs.
How do you trigger a CSS transition? Provide two methods.
WHAT IT TESTS: That you know a transition needs a property change to fire, not just a declaration. ANSWER OUTLINE: Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.