More in Frontend Dev — page 5
CSS Modules versus Styled Components
WHAT IT TESTS: CSS scoping tradeoffs. OUTLINE: 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. RED FLAG: claiming one is strictly best.
Accessible composite TextField component
WHAT IT TESTS: accessible composition and prop forwarding. OUTLINE: associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input. RED FLAG: a label not tied to the input, or swallowing native props.
Customize a Button without !important
WHAT IT TESTS: designed-in customization. OUTLINE: expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly. RED FLAG: reaching for !important.
Designing a Card component API
WHAT IT TESTS: clean component API design. OUTLINE: simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable. RED FLAG: passing HTML as a string or via dangerouslySetInnerHTML.
Reusable Button with hover, focus, disabled
WHAT IT TESTS: semantic, accessible button states. OUTLINE: use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction. RED FLAG: a clickable <div> or removing focus outlines.
Integrating design tokens with Tailwind CSS
WHAT IT TESTS: tokens plus utility-first integration. OUTLINE: feed tokens into Tailwind's theme config (or v4 CSS theme) so utilities derive from one source; a parallel setup causes drift. RED FLAG: maintaining tokens and Tailwind values separately.
Modeling responsive design tokens
WHAT IT TESTS: tokens that vary by breakpoint. OUTLINE: model a token as a breakpoint-to-value map, transform into a base custom property redefined in media queries, components use one var per viewport. RED FLAG: one token per breakpoint.
Token architecture for white-label multi-brand
WHAT IT TESTS: multi-brand token strategy. OUTLINE: a shared semantic schema, per-brand primitive and mapping overrides, a build step emitting one bundle per brand, components consume stable semantic names. RED FLAG: forking the system per brand.
Light and dark themes with design tokens
WHAT IT TESTS: token file structure for two themes. OUTLINE: a shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics. RED FLAG: duplicated stylesheets or hardcoding.
Architect themes on a token foundation
WHAT IT TESTS: layered token architecture. OUTLINE: separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics. RED FLAG: components reading primitives.
Versioning a design system library
WHAT IT TESTS: release strategy tradeoffs. OUTLINE: monolithic versioning is simple and coherent but couples unrelated changes; independent versioning gives granular upgrades but adds tooling complexity. RED FLAG: claiming one is universally correct.
Support a one-off that deviates from the system
WHAT IT TESTS: balancing flexibility with system integrity. OUTLINE: offer sanctioned escape hatches like custom-property overrides, scope the one-off to the app not the library, track it for promotion or removal. RED FLAG: forking core components.
Accessibility built into a Modal component
WHAT IT TESTS: baking a11y into components. OUTLINE: trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background. RED FLAG: leaving a11y to consumers or only adding role=dialog.
Roll out a design system color change
WHAT IT TESTS: end-to-end change management. OUTLINE: update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions. RED FLAG: editing the hex in components or shipping unversioned.
Component versus pattern in a design system
WHAT IT TESTS: vocabulary precision. OUTLINE: a component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem. RED FLAG: using the two terms interchangeably.
What are design tokens?
WHAT IT TESTS: tokens as named design decisions. OUTLINE: platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name. RED FLAG: equating a token with a raw hex used inline.
Purpose of a design system for developers
WHAT IT TESTS: why design systems exist. OUTLINE: a single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility. RED FLAG: calling it just a component library or a style guide PDF.
Build a custom PostCSS plugin (px to rem)
WHAT IT TESTS: PostCSS as an AST transformer. OUTLINE: export a plugin returning visitor hooks, walk Declaration nodes, parse and rewrite px values to rem against a base size. RED FLAG: treating CSS as a regex string, not a parsed tree.
Diagnose and shrink a large CSS bundle
WHAT IT TESTS: practical CSS size reduction. OUTLINE: purge unused selectors, minify and merge with cssnano, split critical CSS and code-split per route. RED FLAG: only minifying while shipping dead rules and deeply nested Sass.
Build a scalable Sass theming system
WHAT IT TESTS: scalable theme architecture in Sass. OUTLINE: store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins. RED FLAG: duplicating whole stylesheets per theme.