Interview questions in CSS & Design Systems, page 3
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.
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.
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 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.
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 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.
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().
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.
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.
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.
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.
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.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
Sass @mixin versus @extend
@mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors.
What is PostCSS and how it differs from Sass
PostCSS is a plugin-driven tool that parses CSS into an AST and transforms it; it is not a fixed language like Sass but a platform for plugins like autoprefixer.
Build a DRY button with Sass maps and mixins
A base mixin for shared button styles, a variants map of name to colors looped to generate modifiers, and a sizes map looped for sizing.
What does autoprefixer do and why?
Autoprefixer is a PostCSS plugin that adds vendor prefixes to CSS based on a browserslist target using compatibility data, so you write standard CSS and it handles support.
Build a scalable Sass theming system
Store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins.
Diagnose and shrink a large CSS bundle
Purge unused selectors, minify and merge with cssnano, split critical CSS and code-split per route.
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