Field Guide

Deep explanations of CSS mechanics, tradeoffs, and production behavior.

Use the layout model that matches the relationship between items, not the one you reached for last time.

Container queries let a component respond to the space it actually has, which is often more useful than the viewport width.

Subgrid is most useful when nested children need to inherit the alignment contract of a parent grid.

Many layout bugs are intrinsic sizing bugs wearing a responsive design costume.

Field Guide intermediate

CSS alignment gets easier when you separate aligning items from distributing leftover space.

Cascade layers let teams control order explicitly so components do not need to win by becoming more specific.

Field Guide intermediate

Custom properties are most valuable when they expose the decisions a component allows callers to change.

Field Guide intermediate

Logical properties make CSS describe inline and block flow instead of hard-coding left, right, top, and bottom.

Responsive spacing should protect relationships between elements, not just grow because the viewport got wider.

Field Guide intermediate

Sticky positioning works when the element has a scroll container, a threshold, and enough room to move.

The :has() selector is powerful when it reflects document state, not hidden application rules.

Field Guide intermediate

The safest UI animations change transform and opacity, but production motion also needs layout, accessibility, and timing discipline.