Performance and Rendering

How CSS Affects Performance

Some CSS changes trigger layout (reflow), some only repaint, and some can be composited efficiently. Knowing the difference helps you keep the UI smooth.

Containment and Content Visibility

Skip rendering offscreen content until it’s needed:

.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

Use will-change Carefully

Reserve it for elements that truly animate or transform:

.menu {
  will-change: transform;
}

Selector Performance

Complex selectors can be slower to match. Prefer class-based selectors and keep nesting shallow.

/* Prefer */
.card-title { font-weight: 600; }

/* Avoid deep chains */
main .sidebar ul li a span { }

Contain Layout & Paint

Limit the impact of layout changes:

.widget {
  contain: layout paint;
}