Composite Design Tokens: Bundling Style Properties
A composite design token bundles multiple style values into a single, semantic unit, like a "style kit" for shadows or typography. Use them to apply complex, multi-property styles like borders or text styles with one reference.
Designing Durable Component APIs
The best component API is often no API. Design from the user's perspective by first writing the ideal usage snippet, a "dream-driven" approach. This ensures intuitive components that boost design system adoption.
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.
Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
CSS Minification: Smaller Files, Faster Sites
CSS minification vacuum-packs your stylesheets, removing whitespace, comments, and unused code to shrink file size. This automated build step improves performance by reducing network transfer size.
CSS Cascade Layers: Control Your Cascade
Cascade Layers are explicit buckets for your CSS, letting you control which styles win without fighting specificity. Use them to predictably layer resets, component libraries, and utilities.
Critical CSS: Render Above-the-Fold Content Instantly
Critical CSS accelerates rendering by inlining styles for above-the-fold content directly in the HTML. This lets the browser paint the visible page immediately, while the full stylesheet loads asynchronously.
Scoped CSS: Styling Components Without the Cascade Mess
@scope fences off your CSS, applying styles only within a specific part of the DOM. This lets you style a component without your rules leaking out or clashing with global styles.
Tailwind CSS: Styling Directly in Your HTML
Tailwind CSS lets you build designs by composing utility classes like `flex` and `pt-4` directly in your HTML. This avoids context-switching for rapid UI development. The main footgun is creating verbose, unreadable markup if not managed well.
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.
Scroll-driven Animations: Animate on Scroll, Not Time
Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.
CSS Motion Path: Animate on a Curve
Think of `offset-path` as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate `offset-distance` to move the element.
CSS transform-style: Let Children Live in 3D Space
The `transform-style` property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use `preserve-3d` to create nested 3D objects. Beware: properties like `opacity < 1` or `overflow` will break the 3D context and flatten it.
CSS `will-change`: A Performance Hint, Not a Magic Wand
`will-change` tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.
CSS `perspective`: Creating 3D Depth
The CSS `perspective` property sets a 'camera' distance for 3D-transformed children, creating a sense of depth. Use it on a container to make elements appear to recede into the screen. The main footgun: a smaller value creates a *more* dramatic effect.
CSS 3D Transforms: Adding Depth to the DOM
CSS 3D transforms treat flat elements like objects in a 3D space, adding depth with properties like `rotateY` and `translateZ`. Use them for card-flip animations or product carousels. The footgun: forgetting to set `perspective` on a parent makes 3D look flat.
animation-fill-mode: Hold Styles Before and After Animation
The `animation-fill-mode` property prevents the jarring "snap" back to an element's original state after a CSS animation. Use `forwards` to hold the final state or `backwards` to apply the start state during a delay.
CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: `ease` accelerates more sharply than the symmetrical `ease-in-out`.
CSS Keyframe Animations: Multi-Step Motion Control
Think of CSS keyframes as a flipbook for your UI. You define styles at specific moments, and the browser animates between them. It's for multi-stage sequences, like loading spinners, where simple transitions fall short.
pointer-events: Making Elements Click-Through
The `pointer-events` property makes elements invisible to clicks and hovers, letting events pass through to what's underneath. Use it for decorative overlays on clickable content or to temporarily disable buttons.