Top 30 Intermediate CSS & Design Systems Interview Questions and Answers
30 intermediate multiple-choice CSS & Design Systems interview questions, past the definitions: how the pieces fit together, what breaks in practice, and the trade-off behind a choice. They come from 30 bites in the CSS & Design Systems library, the middle slice of the 132 CSS & Design Systems interview questions in the library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
Tailwind, CSS, accessibility, design tokens
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
A user-agent stylesheet sets a button to black with a high-specificity selector, and an author stylesheet sets it to blue with a low-specificity selector. What is the final color?
Show the answer
Answer: b · Blue, because author styles originate from a higher origin than user-agent styles, and origin is evaluated before specificity.
The cascade evaluates origin before specificity, so an author rule always beats a user-agent rule regardless of selector weight. Option A represents the common misconception that specificity trumps origin, while D incorrectly invokes source order when origin already differs.
Read the full bite: Describe the full CSS cascade precedence order
Question 2 of 30
Two adjacent block-level siblings in normal flow have margin-bottom: 30px and margin-top: 20px. What is the resulting vertical space between them?
Show the answer
Answer: d · 30px, because the larger of the adjacent margins is used
Margin collapsing means adjacent vertical margins in normal flow combine into a single margin equal to the largest value, so 30px is rendered. The 50px option reflects the common misconception that margins always add together.
Read the full bite: What is margin collapsing? Give a sibling scenario and prevention.
Question 3 of 30
Which statement correctly distinguishes a pseudo-element from a pseudo-class?
Show the answer
Answer: d · A pseudo-element styles a part or generated sub-part not present in the DOM
Pseudo-elements such as ::before style virtual parts not in the DOM, while pseudo-classes select existing elements by state. Only pseudo-elements use double colons in modern syntax, so the last option is wrong.
Read the full bite: Pseudo-class versus pseudo-element in CSS
Question 4 of 30
In a specificity conflict between `#header` and a selector with eleven classes, which statement is true?
Show the answer
Answer: a · The `#header` selector wins because the ID column outweighs any number of classes
The card explains that specificity is a tuple where the leftmost nonzero column wins, so one ID always beats any number of classes. Option D is tempting because it reflects the common error of collapsing the tuple into a single integer.
Read the full bite: How is CSS specificity calculated for a complex selector?
Question 5 of 30
Which CSS approach makes a background image completely fill its container while preserving its original aspect ratio?
Show the answer
Answer: d · background-size: cover; background-repeat: no-repeat;
background-size: cover scales the image until it fills the entire container and preserves its aspect ratio by cropping excess, whereas 100% 100% forces the image to match the container's exact dimensions and stretches it out of proportion.
Read the full bite: Which CSS background properties make a hero image cover its container?
Question 6 of 30
Which method correctly adds a top-to-bottom black gradient overlay—fully opaque at the top to half-transparent at the bottom—directly over a background image without extra DOM elements?
Show the answer
Answer: b · background-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5)), url(img.jpg);
In a comma-separated background-image list, the first layer renders closest to the viewer, so the gradient must be declared before the url to remain visible. Option D reverses that stacking order and hides the gradient behind the photo, while C adds unnecessary markup and D dims the entire image uniformly instead of creating a controlled fade.
Read the full bite: Create a vertical black gradient overlay on a background image
Question 7 of 30
When choosing font-display: swap over block for body text, what key user experience trade-off should you expect?
Show the answer
Answer: c · Swap shows fallback text almost immediately but risks layout shift when the custom font arrives, while block hides text briefly to avoid initial metric changes.
Swap displays fallback text within an extremely short block period but risks cumulative layout shift when the custom font metrics replace the fallback, whereas block hides text for a short block period to preserve initial visual stability. Distractor B is tempting but wrong because swap increases, not prevents, layout shift risk.
Read the full bite: What is font-display and how do swap and block differ?
Question 8 of 30
When architecting a maintainable CSS color system, what is the main benefit of defining tokens on :root and consuming them with var()?
Show the answer
Answer: c · It creates a single source of truth so updating one value propagates to all components
Defining tokens on :root creates a single source of truth inherited everywhere, so one edit updates all components using var(). Distractor A describes SASS variables, which are compiled away and cannot be mutated at runtime like native CSS custom properties.
Read the full bite: How do CSS Custom Properties manage a design system color palette?
Question 9 of 30
When a flex container overflows because the sum of flex-basis values exceeds its width, how does the browser determine how much each item shrinks?
Show the answer
Answer: a · Each item surrenders space in proportion to the product of its flex-shrink and flex-basis values.
The flexbox algorithm weights each item's shrink factor by its flex-basis, so larger starting items surrender more of the overflow relative to their siblings. Option D is tempting because flex-grow distributes leftover space by ratio alone, but flex-shrink specifically factors in the starting size to determine how much each item gives up.
Read the full bite: Explain flex-grow, flex-shrink, flex-basis and their interaction
Question 10 of 30
In a grid declared with repeat(auto-fit, minmax(250px, 1fr)), what happens to leftover space in a row after all items are placed?
Show the answer
Answer: a · Existing columns grow to fill the space because auto-fit collapses unused tracks
auto-fit collapses empty tracks so extra space is redistributed to existing columns via 1fr, whereas auto-fill preserves empty tracks that compete for space. Wrapping only occurs when the container cannot satisfy the minimum track size, not after items are placed.
Read the full bite: Create a responsive card grid without media queries
Question 11 of 30
Which properties size tracks the browser generates when items are placed outside the explicit grid?
Show the answer
Answer: c · grid-auto-rows and grid-auto-columns
grid-auto-rows and grid-auto-columns define the dimensions of implicitly created tracks outside the explicit grid. auto-fit and auto-fill are repeat strategies that collapse empty explicit tracks rather than generate new implicit ones.
Read the full bite: Explicit vs implicit grid: how do you control implicit tracks?
Question 12 of 30
In a Flexbox sidebar layout, why does a wide table in the main area sometimes push the fixed sidebar off screen?
Show the answer
Answer: d · The main area defaults to min-width: auto and refuses to shrink below the table width
The correct answer is B because Flexbox items default to min-width: auto, which prevents the main area from shrinking below its content size and pushes the sidebar off-screen. Option A is tempting but wrong because a single-row layout is exactly what Flexbox is designed for, and claiming Grid is always superior is a common red flag.
Read the full bite: Implement a fixed-width sidebar with Flexbox and CSS Grid
Question 13 of 30
In which scenario is an adaptive layout strategy clearly preferable to a purely responsive one?
Show the answer
Answer: a · An analytics platform that serves heavy D3 and WebSocket code to desktop but a separate lightweight mobile build
This scenario reflects true adaptive design: it delivers entirely different code bundles based on device class to optimize performance and avoid shipping unnecessary libraries. Option D is wrong because adding breakpoints to reflow a single template is still responsive design; adaptive requires serving distinct markup or assets, not just more breakpoints.
Question 14 of 30
Which strategy correctly implements a mobile-first responsive 3-column layout using either Flexbox or Grid?
Show the answer
Answer: d · Introduce the three-column layout inside a min-width 768px query, using flex-basis changes for Flexbox or repeat(3, 1fr) for Grid.
D correctly describes the mobile-first approach: start with a single-column default, then use a min-width breakpoint to introduce columns via flex-basis for Flexbox or repeat(3, 1fr) for Grid. A is tempting but wrong because desktop-first max-width queries actually increase override bloat and are harder to maintain.
Read the full bite: Build a responsive 3-column layout with Flexbox and Grid
Question 15 of 30
If you provide srcset with w descriptors but omit the sizes attribute, how will the browser behave?
Show the answer
Answer: c · It assumes the image fills the viewport width and may select an unnecessarily large file
Without sizes, the browser defaults to assuming the image spans the full viewport width, which can lead it to download an unnecessarily large file. It makes this choice before CSS loads, so it cannot wait for the final rendered width.
Read the full bite: How would you use srcset and sizes for responsive image performance?
Question 16 of 30
When a user increases their browser's default font size without zooming, why do rem and em outperform px?
Show the answer
Answer: b · rem and em scale with font metrics, so text and spacing adjust automatically, while px remains fixed.
rem and em are relative to font metrics, so they adjust when a user changes their browser default font size, whereas px is absolute and does not. Option A is tempting because it uses the right vocabulary but incorrectly swaps rem and em, which is a common misconception the card explicitly warns against.
Read the full bite: Explain advantages of rem and em over px in responsive design
Question 17 of 30
When animating element position, why does transform: translateX() usually outperform animating the left property?
Show the answer
Answer: b · transform is handled entirely on the compositor and skips layout, whereas left forces geometry recalculation each frame.
transform skips layout and paint by running directly on the GPU compositor, keeping frame rates high, whereas animating left recalculates geometry every frame. The distractor D is wrong because absolute positioning does not remove layout costs—changing left still forces the browser to recalculate that element's position.
Read the full bite: Why is animating transform preferred over top or margin-left?
Question 18 of 30
For a staggered CSS fade-in where the number of list items is determined at runtime, which approach best scales the delay calculation without JavaScript?
Show the answer
Answer: d · Apply an inline --index custom property and use calc() for animation-delay
An inline --index with calc() lets the browser derive delays for any number of items declaratively. B is a workable fallback but cannot handle an arbitrary runtime count, while A is unmaintainable and D incorrectly uses transitions that require a state change trigger.
Read the full bite: Create a staggered list fade-in using only CSS
Question 19 of 30
When using will-change for a transform animation, which practice best balances performance gains with resource costs?
Show the answer
Answer: a · Toggle it via JavaScript right before the animation and clear it afterward
Toggling will-change via script provides the browser time to promote a layer without retaining costly optimizations indefinitely. Leaving it in a stylesheet permanently wastes memory by keeping layers alive forever, which can degrade performance on low-end devices.
Read the full bite: CSS will-change: purpose, appropriate use, and overuse consequences
Question 20 of 30
Why can CSS custom properties switch themes at runtime while Sass variables cannot?
Show the answer
Answer: c · Custom properties resolve live in the browser and cascade, while Sass compiles to fixed values
Custom properties exist at runtime and respond to cascade overrides, so reassigning them on a scope reskins instantly. Sass variables are resolved at build time into static values, so they cannot change after compilation.
Read the full bite: How custom properties enable dynamic theming
Question 21 of 30
What is the primary reason ITCSS orders layers from generic to specific?
Show the answer
Answer: c · So specificity rises with source order, letting later rules override earlier ones predictably
Ordering low-to-high specificity along source order means later, more specific rules cleanly win, avoiding specificity wars and !important. The other options misattribute the benefit to file size, parse speed, or removing classes.
Question 22 of 30
How does @extend differ from @mixin in its effect on compiled CSS?
Show the answer
Answer: b · @extend groups selectors into a shared rule so declarations appear once, while a mixin copies declarations into each include
@extend adds the inheriting selector to the original's selector list so shared declarations are written once, whereas a mixin copies its declarations into every include site. The reversed and identical-output options misdescribe both mechanisms.
Question 23 of 30
Which statement best captures how PostCSS differs from Sass?
Show the answer
Answer: c · PostCSS is a plugin-driven tool that transforms a CSS AST, so its features depend on the plugins enabled
PostCSS is a transformation platform whose capabilities come from plugins like autoprefixer and cssnano, unlike Sass's fixed language. It is not limited to minification, and it is commonly used alongside Sass in the same pipeline.
Read the full bite: What is PostCSS and how it differs from Sass
Question 24 of 30
What is the main maintainability benefit of generating button variants from a Sass map with @each instead of writing each variant by hand?
Show the answer
Answer: a · Adding a variant means one map entry, keeping a single source of truth and avoiding duplicated shared styles
A map plus @each centralizes variant data so a new variant is one entry and shared styles are not duplicated. It does not guarantee smaller output, still needs a base rule, and does not auto-generate states.
Read the full bite: Build a DRY button with Sass maps and mixins
Question 25 of 30
What does autoprefixer rely on to decide which vendor prefixes to add?
Show the answer
Answer: a · A browserslist target combined with Can I Use compatibility data
Autoprefixer uses your browserslist configuration plus Can I Use data to emit only the prefixes your target browsers need. It deliberately avoids blanket-adding every prefix, and declaration order or user sampling play no role.
Question 26 of 30
When updating the design system's primary blue, why publish a new versioned package release rather than just rebuilding and pushing the CSS?
Show the answer
Answer: c · Semver lets consuming apps control when they adopt the change and test it
A versioned release lets each consuming app decide when to upgrade and run its own tests first. Pushing CSS without versioning forces the change on everyone instantly with no opt-in or rollback path.
Question 27 of 30
Beyond adding role=dialog, which behavior is essential for an accessible modal and most often forgotten?
Show the answer
Answer: d · Trapping focus inside and returning it to the trigger on close
Focus management, trapping focus within the dialog and restoring it on close, is what makes a modal usable for keyboard and screen-reader users. Styling like width and shadow has no bearing on accessibility.
Read the full bite: Accessibility built into a Modal component
Question 28 of 30
For light and dark themes from tokens, what does the generated CSS typically look like?
Show the answer
Answer: d · The same semantic custom properties defined under :root and under a [data-theme=dark] selector
Emitting the same semantic custom properties under :root and a dark selector lets one shared stylesheet switch via the cascade. Separate full stylesheets duplicate code and prevent instant runtime switching.
Read the full bite: Light and dark themes with design tokens
Question 29 of 30
Why are exposed CSS custom properties a cleaner override mechanism for a design system button than !important?
Show the answer
Answer: b · They are resolved as values through the cascade, avoiding specificity escalation entirely
Custom properties let consumers set a value the component already reads, so overriding needs no specificity battle. !important forces a win that every later override must then also escalate, creating unmaintainable CSS.
Question 30 of 30
What makes clicking a TextField's label focus its input and gives screen readers the field's name?
Show the answer
Answer: d · A programmatic association via matching for and id (or wrapping the input in the label)
Matching for and id (or nesting the input in the label) creates the association that links label to input for both click-to-focus and the accessible name. Visual placement and placeholders do not establish that programmatic link.
Read the full bite: Accessible composite TextField component
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.