Invalidation, dirty bits, and contain

You change one class on one element and the browser re-paints a thousand elements. You change a different class on the same element and nothing else moves. The difference is which pipeline stage the property invalidates — and whether anything downstream can escape.

The invalidation rule

Changing a CSS property invalidates one or more pipeline stages. Everything from that stage down must re-run.

csstriggers.com publishes a per-property map. Learn the cheap ones (transform, opacity, filter on a promoted element) and the expensive ones (anything that affects flow).

How dirty bits propagate

If you can isolate your changes to an independent subtree, the invalidation stops at the isolation boundary.

CSS Containment: capping the blast radius

CSS Containment gives you a knob to limit how far invalidation propagates.

• contain: layout — “this element’s layout cannot affect its ancestors.” If a child resizes, the parent’s siblings do not need to re-layout.
• contain: paint — painting is contained inside the box (overflow clipped). The browser can skip painting it entirely when it is off-screen.
• contain: strict — combines layout, paint, and size containment.

The newer content-visibility: auto goes further: it tells the browser to skip the element entirely (no style calc, no layout, no paint) when it is off-screen. Combined with contain-intrinsic-size (which gives the browser a placeholder size), it lets a page with thousands of below-the-fold elements render in milliseconds because only on-screen elements pay the cost.

These are the modern “free wins” for any page rendering large lists, infinite scroll feeds, or long-form content.