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…
The Accessibility Tree: The DOM for Assistive Tech
The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.
ARIA Live Regions: Announcing Dynamic Content
ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use `aria-live="polite"` for most updates and `assertive` only for critical alerts.
WAI-ARIA Authoring Practices: The Cookbook for Accessible Components
Think of WAI-ARIA Authoring Practices as the official cookbook for accessible web components. It provides patterns for widgets like tabs or accordions, ensuring they work with assistive tech.
CSS :focus-visible: Smart Focus for Accessibility
:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.
WAI-ARIA Roles: Semantics for Custom Components
WAI-ARIA roles are job titles for HTML elements, telling assistive tech what a generic `<div>` is meant to be, like a tab or button. Use them for custom UI components that lack a native HTML equivalent.