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.
CSS 2D Transforms: Move, Rotate, and Scale Elements
CSS transforms let you move, rotate, scale, and skew elements without affecting the document's layout flow. Use it for UI animations like hover effects or modal pop-ups.
CSS Transitions: Animating State Changes
CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like `:hover` or when adding classes with JavaScript.
CSS clamp(): Fluid Sizing in One Line
The CSS clamp() function sets a value that scales between a minimum and maximum, like a thermostat for CSS properties. It's ideal for fluid typography, letting font-size grow with the viewport but not beyond set limits.
CSS object-fit: Control How Images Fill a Box
object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is `fill`, which stretches the image; you almost always want `cover` or `contain`.
Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use `srcset` for high-DPI screens and `<picture>` for art direction. The footgun is relying only on CSS `max-width`; this forces mobile users to download unnecessarily large…