Bundle Size: When Runtime Dependencies Defeat Tree Shaking
Tree Shaking is static, but your app is dynamic. It can fail when a component imports a large dependency for an optional, runtime-configured feature. A UI library's provider might pull in an entire form library, even if you don't use it.
Atomic CSS: Styling with Single-Purpose Utilities
Atomic CSS builds interfaces with tiny, single-purpose classes directly in your HTML, like using LEGO bricks for styling. It's the core of frameworks like Tailwind CSS, letting you build UIs without writing custom CSS. The footgun is creating unreadable HTML.
Design System Metrics: Proving Its Worth
Prove your design system's value with data, showing it's a force multiplier, not just a library. Track metrics like component adoption and faster time-to-market to justify budget and guide your roadmap. The footgun: avoid vanity metrics like component count.
Versioning Design Systems: Holistic vs. Incremental
Versioning a design system is about communicating change. Use Semantic Versioning (MAJOR.MINOR.PATCH) to signal update impact. This prevents teams from using outdated components, ensuring consistency.
Design System Governance: Preventing UI Chaos
A design system governance model defines the rules for evolving your UI library, preventing a free-for-all of conflicting changes. It dictates how new components are proposed and approved.
Source Maps: Debug Your Compiled CSS
Source maps are a decoder ring for your browser's dev tools, translating minified CSS back to the original SCSS or LESS files you wrote. This lets you debug styles in your source code, not the unreadable compressed output.
PostCSS Preset Env: Write Future CSS Today
postcss-preset-env is like Babel for CSS, transpiling modern syntax into code older browsers understand. Use it to write features like nesting or `color-mix()` today. The footgun: it only polyfills Stage 2+ features by default; you must opt-in for more.
CSS Combinators: Targeting by Relationship
CSS combinators target elements by their DOM relationship, not just class or ID. They let you select an element inside another (`div p`) or right next to one (`h2 + p`). This is key for styling nested menus or spacing adjacent items.
CSS Houdini: Extending the CSS Engine
CSS Houdini gives developers low-level access to the browser's rendering engine, letting you write your own CSS features. Use it to polyfill new CSS or define type-safe custom properties with @property, preventing invalid values from being silently ignored.
CSS Anchor Positioning: Beyond the Containing Block
CSS Anchor Positioning lets you tether an element to any other element, not just its parent. Use it for popovers or tooltips that automatically reposition to stay in view. The footgun is forgetting to explicitly name your anchor with `anchor-name`.
View Transitions API: Animate Between DOM States
The View Transitions API lets the browser handle complex animations between page states. It simplifies transitions in Single-Page Apps and, for the first time, enables them for Multi-Page Apps. The main footgun is forgetting it's a progressive enhancement.
CSS Masking: Using Stencils for Web Elements
CSS masking is like a stencil for your elements. You provide a shape, and only the parts of the element under the stencil's cutout are visible. Use it for non-rectangular shapes, like text cutouts.
CSS Scroll Snap: Guiding User Scrolling
CSS Scroll Snap turns a free-scrolling container into a slideshow, guiding users to land perfectly on predefined points. It's ideal for image carousels or full-page sections where partially visible elements look sloppy.
Fix Ragged Text Lines with `text-wrap: balance`
Fix awkward text wrapping in headings. `text-wrap: balance` tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.
Web Workers: Offload Heavy Tasks from the UI Thread
Web Workers run JavaScript on a background thread, preventing heavy tasks from freezing your UI. Use them for complex calculations or data processing that shouldn't block rendering.
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.
Design System Office Hours: Your Team's Live Support Channel
Design System Office Hours are a live support channel for your users. They're great for answering questions, unblocking teams, and gathering feedback as adoption grows. The main footgun is inconsistent promotion, which leads to empty, ineffective sessions.
Contribution Guidelines: The Rulebook for Your Design System
Contribution guidelines are the rulebook for evolving a shared design system, defining who can add what and how. They're essential when multiple teams need to contribute without chaos.
CODEOWNERS: Auto-Assigning PR Reviewers
A CODEOWNERS file maps repo paths to owners, auto-requesting their review on PRs. It ensures experts review changes to their code, like a platform team owning CI configs. The footgun: owners aren't notified for draft PRs and must have write permissions.
Design System Build Pipeline: Automating UI Consistency
A design system pipeline treats UI rules like code, syncing design tokens from a single source of truth (like Figma) to your codebase. It prevents drift between design and code, but the biggest footgun is not starting one, leading to manual, error-prone…