Everything in CSS & Design Systems, page 3
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.
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.
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.
Packaging a design system as an npm dependency
Publish to an npm registry, with package.json holding the version, entry points, and dependencies, and version it via SemVer.
Why design systems use Sass or PostCSS
Sass adds variables, nesting, mixins, and functions for reuse; PostCSS transforms CSS via plugins like autoprefixer.
Respecting prefers-reduced-motion in a design system
Gate CSS animations behind the media query, read the same preference in JS via matchMedia, and centralize motion tokens.
Building an accessible combobox with ARIA
Input has role combobox with aria-expanded and aria-controls, listbox holds options, and choose aria-activedescendant to keep focus in the input versus roving DOM focus.
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.
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.
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.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target.
Shadow DOM encapsulation vs CSS Modules
Shadow DOM creates a separate tree blocking selectors both ways, CSS Modules only rename classes, and global styles need explicit bridges.
The polymorphic 'as' prop pattern
Render the element from an as prop, infer props from the chosen element, and forward refs.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both.
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.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input.
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.
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction.
Integrating design tokens with Tailwind CSS
Feed tokens into Tailwind's theme config (or v4 CSS theme) so utilities derive from one source; a parallel setup causes drift.
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