Css

---
name: CSS
slug: css
version: 1.0.1
description: Write modern CSS with proper stacking contexts, layout patterns, responsive techniques, and performance optimization.
metadata: {"clawdbot":{"emoji":"🎨","os":["linux","darwin","win32"]}}
---

## 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