Headline: Four CSS features — container queries, :has(), subgrid, and cascade layers — let me delete most of the JavaScript I used to write for layout and conditional styling. Container queries size a component against its container instead of the viewport, :has() styles a parent based on its children, subgrid makes a nested grid adopt its parent's track lines, and @layer makes override order explicit instead of a specificity race.
Key takeaways
container-type: inline-size on a wrapper plus @container (min-width: 30rem) styles a component by the width of its container, so one card works in a sidebar and in a full-width grid with no viewport media query.
:has() is the CSS parent selector: .card:has(> img) matches a card that contains an image, and it re-evaluates live as the DOM and form state change.
grid-template-rows: subgrid makes a nested grid adopt its parent's row lines, which is how sibling cards align their titles and footers without fixed heights.
