Intermediate interview questions in CSS & Design Systems, page 2
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.
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.
Roll out a design system color change
Update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions.
Accessibility built into a Modal component
Trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics.
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input.
CSS Modules versus Styled Components
CSS Modules scope via build-time hashed class names with near-zero runtime; Styled Components scope via runtime CSS-in-JS with easy dynamics but a runtime cost.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both.
Managing focus in an accessible modal dialog
Move focus in on open, trap Tab within the dialog, close on Escape, and restore focus to the trigger on close.
ARIA roles for an accessible tab interface
Tablist contains tabs, each tab uses aria-selected and aria-controls, panels use role tabpanel with aria-labelledby, and arrow keys move between tabs.
Announcing status messages with ARIA live regions
Use a live region with aria-live polite or role status, ensure it exists in the DOM beforehand, and insert text to trigger announcement.
Automated visual regression testing for components
Render components in known states, capture screenshots, diff against approved baselines in CI, and require human review of differences.
Releasing a breaking Button change with SemVer
Bump the major version, write a changelog and migration guide, deprecate before removing where possible, and communicate clearly.
Bundling a component library for tree-shaking
Ship ES modules, mark sideEffects false, preserve named exports, and externalize peers so consumers tree-shake and code-split.
Classifying a Card change under SemVer
Removing a prop is breaking so the whole release is major, document and migrate, and release the highest applicable level.
Governance for design system contributions
A clear intake and proposal step, review by core maintainers plus design, and criteria covering accessibility, API consistency, tokens, tests, and docs.
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