System Design bank CSS System Design / 18 questions Your progress 0 / 18 done Saved in this browser. Reset All 18 Easy 9 Hard 9 Hide done No questions match those filters. 01 Explain how you'd structure CSS architecture for a large multi-team codebase to avoid specificity wars. Easy 02 Design a design-token-driven CSS architecture for a component library. Hard 03 Explain the tradeoffs of utility-first CSS (Tailwind) versus traditional CSS methodologies. Easy 04 Design a strategy for enforcing design consistency in a large codebase using Tailwind. Hard 05 Explain how CSS Modules achieve local scoping and avoid class name collisions. Easy 06 Compare CSS Modules and CSS-in-JS for a component library shipped to external consumers. Hard 07 Explain the runtime performance tradeoffs of CSS-in-JS libraries versus static CSS. Easy 08 Design a strategy to migrate a CSS-in-JS codebase to zero-runtime CSS for better performance. Hard 09 Explain the BEM naming convention and the problems it solves. Easy 10 When does BEM become insufficient, and what would you adopt instead at scale? Hard 11 Explain mobile-first responsive design and its performance benefits. Easy 12 Design a responsive layout strategy for a dashboard with data tables that must work on mobile. Hard 13 Explain the difference between flex-grow, flex-shrink, and flex-basis. Easy 14 Debug a Flexbox layout where items aren't wrapping as expected. Hard 15 Explain CSS Grid's implicit vs explicit grid and when to use grid-template-areas. Easy 16 Design a complex dashboard layout using CSS Grid with responsive breakpoints. Hard 17 Explain container queries and how they solve problems media queries can't. Easy 18 Design a reusable card component that adapts its layout using container queries instead of viewport queries. Hard ← Previous Accessibility Next → State Management