More in CSS & Design Systems — page 13
Hardware Acceleration: Getting Smooth CSS Animations
Use the GPU for smooth CSS animations by sticking to `transform` and `opacity`. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like `width` or `left`, which cause jank.
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.
Intrinsic Web Design: Components That Style Themselves
Intrinsic Web Design lets components style themselves based on their container, not the whole page. Instead of just viewport media queries, use container queries to make a component adapt to a wide content area or a narrow sidebar, making it truly reusable.
Media Queries: CSS That Adapts to the User's Device
Instead of one-size-fits-all CSS, media queries let your styles react to the user's device. They are used to change layouts for different screen widths, orientations, or display resolutions. The footgun is only testing for width, ignoring other factors.
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`.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with `srcset` and tell it how much screen space the image will take with `sizes`. The browser then picks the most efficient option for the user's device. The footgun is forgetting `sizes`, which makes the browser assume 100vw.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
Viewport Units: Sizing Against the Browser Window
Viewport units (vw/vh) size elements relative to the browser window, not their parent container. `1vw` is 1% of the viewport's width. Use them for full-screen hero sections or typography that scales with the browser. A common footgun: `100vw` causes overflow.
Relative CSS Units: rem vs. em
Relative CSS units like `rem` and `em` tie element sizes to font size for scalable UIs. `rem` is relative to the root font size, providing consistency. `em` is relative to the parent, causing sizes to compound. The footgun is accidentally nesting `em` units.
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…
Fluid Layouts: Adapting Content to Any Screen
A fluid layout makes content flow to fill its container, preventing horizontal scrollbars. It's key for responsive sites that work on any device and for accessibility. The footgun: without constraints, content can become unreadably wide or awkwardly cramped.