Design Systems
204 bites tagged Design Systems — interview questions with model answers, and 60-second explainers.
Semantic vs. Primitive Design Tokens
Semantic tokens give meaning to raw values so components bind to intent, not hex codes. They let you rebrand or theme by changing aliases, not component code.
BEM: Scoped CSS Naming by Convention
BEM is a naming convention that scopes CSS classes like postal addresses, preventing specificity wars in component systems. It shines in large codebases with many developers. The footgun is deep element nesting, which bloats markup into unreadable strings.
CSS :has(): Query Parents and Previous Siblings
CSS :has() styles an element based on its children or later siblings, like highlighting a section with a featured card. Previously this required JavaScript. If unsupported, the whole selector block fails, so wrap it in :is() or use progressive enhancement.
Your button breaks in German: what CSS and API strategies fix it?
Tests i18n resilience. Strong answers pair CSS tactics like text-wrap, min-width, and container queries with API levers such as truncation flags, max-length props, or adaptive icon slots. Red flag: telling translators to shorten text or hardcoding widths.
Unit Testing UI Components: Beyond the DOM Mock
Unit tests for UI components verify individual pieces in a mocked browser environment (jsdom). This is standard for checking component logic with Jest or Vitest, but it can't test visual rendering, element sizes, or layout, creating critical blind spots.
WAI-ARIA: A Script for Custom UI Accessibility
WAI-ARIA gives custom UI a voice for assistive tech. It's the script telling a screen reader what a `<div>` acting as a button is and if it's "pressed." Use it for custom widgets when native HTML can't.
The RFC Process: Formalizing Technical Decisions
An RFC (Request for Comments) is a formal document for proposing a major technical change, creating a public record of the decision. It's used for big shifts like adding a new design system component or changing a core API.
Component Scaffolding: Automate Boilerplate, Enforce Consistency
Component scaffolding automates creating files from templates, ensuring new components start with the correct structure. Instead of copy-pasting, run a command to generate the component, its styles, and tests.
UI Patterns: Reusable Recipes for Interfaces
UI patterns are reusable recipes for common interface problems, like tabs or accordions. They create a shared language for building predictable, accessible components. The biggest footgun is creating a component that looks right but lacks accessible behaviors.
SMACSS: A Naming Convention for CSS Scalability
SMACSS organizes CSS into five categories to prevent spaghetti code. It's a naming convention and thought process, not a library you install. It's used in large codebases where teams need a shared vocabulary for styling components.
CSS Custom Properties: Variables for Your Stylesheet
CSS Custom Properties are variables for your stylesheet. Define a value like `--primary-color` once on `:root` and reuse it with `var()`, making global theme changes easy. The main footgun: they only work for property values, not names or selectors.
CSS Pseudo-elements: Styling Parts of an Element
Pseudo-elements style parts of an element not in the DOM, like a paragraph's first line or selected text. Use `::before`/`::after` for decorative content or `::selection` to style user highlights.
Get Design Systems bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.