How do you optimize CSS for performance?

CSS optimization for performance: Critical CSS: extract above-the-fold CSS and inline it in <style> tags — eliminates render-blocking CSS for initial paint. Tools: Critical, Penthouse, Next.js does this automatically. Reduce CSS size: remove unused CSS with PurgeCSS or Tailwind CSS's JIT (only includes used utility classes). Avoid complex selectors: deeply nested selectors are slower to parse. BEM avoids deep nesting. Avoid layout-triggering properties in animations: animate only transform and opacity — they run on the GPU compositor without triggering layout or paint. Animating width, height, top, left triggers expensive layout. Contain: contain: layout or contain: strict limits the scope of layout recalculation to the contained element. will-change: will-change: transform promotes an element to its own compositor layer — use sparingly (memory cost). @layer: organize CSS with explicit cascade layers to avoid specificity battles and unnecessary overrides. CSS modules / scoped CSS: scoped styles prevent style leakage and enable unused CSS removal. Minimize specificity and nesting in production CSS.