Everything in CSS & Design Systems, page 5
What is a CSS pre-processor?
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
: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
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?
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
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
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?
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
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?
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?
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
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?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible.
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?
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.
How do you trigger a CSS transition? Provide two methods.
Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles