What are common CSS efficiency gotchas?

The short answer

The most common CSS performance issues are: overly specific selectors that are hard to override, using expensive properties in animations (triggering layout/paint instead of composite), large unused CSS files, excessive use of !important, and deeply nested selectors from preprocessors.

Gotcha 1: Animating expensive properties

Copy
/* Bad — triggers layout recalculation every frame */
.box {
  transition:
    left 0.3s,
    width 0.3s;
}
/* Good — only triggers compositing (GPU-accelerated) */
.box {
  transition:
    transform 0.3s,
    opacity 0.3s;
}

transform and opacity are the only properties that can be animated without triggering layout or paint. Everything else (left, top, width, height, margin) forces the browser to recalculate layout on every frame.

Gotcha 2: Overly specific selectors

Copy
/* Bad — too specific, hard to override */
body
  div.container
  > ul.nav-list
  > li.nav-item
  > a.nav-link {
  color: blue;
}
/* Good — simple and easy to override */
.nav-link {
  color: blue;
}

High specificity makes styles hard to maintain. You end up needing !important to override things, which leads to a specificity war.

Gotcha 3: Large unused CSS

If your stylesheet is 200KB but only 30KB is used on the current page, the browser still has to download and parse the entire file. This blocks rendering.

Fixes:

• Use tools like PurgeCSS to remove unused styles
• Use CSS Modules or CSS-in-JS for component-scoped styles
• Split CSS by route with code splitting

Gotcha 4: Using * selectors

Copy
/* Bad — matches every element, runs on every element */
* {
  box-sizing: border-box;
}

The universal selector is fine for box-sizing (this is standard practice), but avoid it for complex styles. The browser has to check every element in the DOM.

Gotcha 5: Excessive box shadows and filters

Copy
/* Expensive — forces paint on every scroll if the element is in view */
.card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  filter: blur(2px);
}

These properties trigger paint operations. If many elements have them, scrolling can become janky.

Gotcha 6: Deep nesting from preprocessors

Copy
// Bad — compiles to very specific selectors
.page {
  .content {
    .sidebar {
      .widget {
        .title {
          color: red;
        }
      }
    }
  }
}
// Output: .page .content .sidebar .widget .title { color: red; }

Keep nesting to a maximum of 2-3 levels.

Why interviewers ask this

This tests practical CSS experience. Anyone can write CSS that works, but writing CSS that performs well requires knowing these gotchas. Interviewers want to see if you think about performance when writing styles.