css

## When to Use User needs CSS expertise — from layout challenges to production optimization. Agent handles stacking contexts, flexbox/grid patterns, responsive design, performance, and accessibility. ## Quick Reference | Topic | File | |-------|------| | Layout patterns | `layout.md` | | Responsive techniques | `responsive.md` | | Selectors and specificity | `selectors.md` | | Performance optimization | `performance.md` | ## CSS Philosophy - Layout should be robust—work with any content, not just demo content - Use modern features—they have better browser support than you think - Prefer intrinsic sizing—let content determine size when possible - Test with extreme content—longest names, missing images, empty states ## Stacking Context Traps - `z-index` only works with positioned elements—or flex/grid children - `isolation: isolate` creates stacking context—contains z-index chaos without position - `opacity < 1`, `transform`, `filter` create stacking context—unexpected z-index behavior - New stacking context resets z-index hierarchy—child z-index:9999 won't escape parent ## Layout Traps - Margin collapse only vertical, only block—flex/grid children don't collapse - `overflow: hidden` on flex container can break—use `overflow: clip` if you don't need scroll ## Flexbox Traps - `flex: 1` means `flex: 1 1 0%`—basis is 0, not auto - `min-width: 0` on flex child for text truncation—default min-width is min-content - `flex-basis` vs `width`: basis is before grow/shrink—width is after, basis preferred - `gap` works in flex now—no more margin hacks for spacing ## Grid Traps - `fr` units don't respect min-content alone—use `minmax(min-content, 1fr)` - `auto-fit` vs `auto-fill`: fit collapses empty tracks, fill keeps them - `grid-template-columns: 1fr 1fr` is not 50%—it's equal share of REMAINING space - Implicit grid tracks can surprise you—items placed outside explicit grid still appear ## Responsive Philosophy - Start mobile-first—`min-width` media queries, base styles for mobile - Container queries: `@container (min-width: 400px)`—component-based responsive - `container-type: inline-size` on parent required—for container queries to work - Test on real devices—emulators miss touch targets and real performance ## Sizing Functions - `clamp(min, preferred, max)` for fluid typography—`clamp(1rem, 2.5vw, 2rem)` - `min()` and `max()`—`width: min(100%, 600px)` replaces media query - `fit-content` sizes to content up to max—`width: fit-content` or `fit-content(300px)` ## Modern Selectors - `:is()` for grouping—`:is(h1, h2, h3) + p` less repetition - `:where()` same as `:is()` but zero specificity—easier to override - `:has()` parent selector—`.card:has(img)` styles card containing image - `:focus-visible` for keyboard focus only—no outline on mouse click ## Scroll Behavior - `scroll-behavior: smooth` on html—native smooth scroll for anchors - `overscroll-behavior: contain`—prevents scroll chaining to parent/body - `scroll-snap-type` and `scroll-snap-align`—native carousel without JS - `scrollbar-gutter: stable`—reserves scrollbar space, prevents layout shift ## Shorthand Traps - `inset: 0` equals `top/right/bottom/left: 0`—less repetition - `place-items` is `align-items` + `justify-items`—`place-items: center` centers both - `margin-inline`, `margin-block` for logical properties—respects writing direction ## Performance Mindset - `contain: layout` isolates repaints—use on independent components - `content-visibility: auto` skips offscreen rendering—huge for long pages - `will-change` sparingly—creates layers, uses memory - Avoid layout thrash—batch reads and writes to DOM ## Accessibility Baseline - `prefers-reduced-motion: reduce`—disable animations for vestibular disorders - `prefers-color-scheme`—`@media (prefers-color-scheme: dark)` for dark mode - `forced-colors: active`—adjust for Windows high contrast - Focus indicators must be visible—don't rely on color alone