All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 181
What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
How do class and ID selectors differ in specificity and use case?
IDs are 1-0-0 and meant for unique elements; classes are 0-1-0 and reusable.
What color wins when an ID and class rule conflict?
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule.
Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
Design System Roadmap: Sequence Adoption Over Completeness
A design system roadmap sequences components by business impact, not visual completeness, to stop teams rebuilding the same UI. Use it when multiple squads duplicate buttons and forms. The footgun is a perfect Figma library engineers never adopt.
Design System Guild: Cross-Team Governance
A design system guild lets squads co-own the system, not a central team alone. It scales when one team cannot cover every surface. The footgun is voluntary membership without decision rights; it devolves into a committee that ships nothing.
Private NPM Registry for Internal Packages
A private registry hosts packages so teams npm install internal design systems like public dependencies. It matters when you split a monolith into shared libraries. The footgun is skipping scoped names and auth, which risks leaking code to the public registry.
Cross-Browser Testing Automation
Rendering engines disagree, so your CSS may break in Safari while Chrome looks fine. Automation runs your UI across real browsers in CI to catch visual drift early. The footgun is testing every pixel, which breeds brittle suites that teams eventually ignore.
Auto-Generated Changelogs for Design Systems
Automated changelog generation turns structured commits into release notes without hand editing. It rescues teams when design systems ship frequent token or component updates. The footgun is that sloppy commits produce useless logs so discipline beats tooling.
Tiered Token Architecture in CSS
Tiered tokens layer CSS variables as raw values, semantic aliases, and component bindings. Use them when one rebrand must update hundreds of elements. The footgun is skipping aliases and binding hex codes directly to components, locking you into manual…
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.
Voice and Tone in Design Systems
Voice is personality; tone is the mood for the moment. Lock both in your design system so UI text feels like one product. The footgun is documenting voice while letting teams pick their own tone, breaking consistency when users are stressed.
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.
Design System Dependency Update Automation
Automating dependency updates pushes design system releases to apps without manual pull requests. It matters when token changes must reach dozens of repositories at once. The footgun is automating bumps without visual regression, which silently breaks UI.
CSS-in-JS: Scoped Styles via JavaScript
CSS-in-JS lets components own their styles in JavaScript, generating CSS and injecting it into the DOM at runtime. It prevents global namespace collisions in component frameworks. The footgun is runtime overhead and bigger bundles.
Seven-Figure Copywriter Ditches Eloquence for Customer Research
Seven-figure copywriter Tim Stoddart says clarity beats eloquence. Mine customer pain points from sales calls and Reddit, then mirror that language in copy. Engineers should swap jargon for verified customer vocabulary to increase conversion.
How would you enforce WCAG 2.1 AA compliance across CI/CD?
Layer axe-core in unit tests, Playwright Axe in CI, visual regression for focus states, and gate deploys on severity.
How do you fulfill a GDPR erasure request across microservices?
Log the request, emit a durable erasure event, let each service delete or anonymize locally, then reconcile.