How can overusing descendant combinators affect performance?

0-2 years experience

1. 1You have a simple page with a header and a list of items. If you write a selector like `header ul li a` for the links, what impact does that have on the browser's rendering compared to a class selector?
2. 2Suppose you need to style all buttons inside a form. How would you write the selector, and what would happen if you used a deep descendant selector like `form div span button` on a page with many nested elements?
3. 3If you notice the page load slows after adding a few more nested selectors, what would you check first?

2-5 years experience

1. 1During a feature rollout you added a selector `.card .content p` to style paragraph text inside cards. After deployment the page's paint time increased noticeably. Walk me through how you would diagnose whether the descendant selector is the cause.
2. 2Your team decided to refactor a component and replaced several class selectors with a single descendant selector `section .widget .title`. Explain the trade‑offs you’d consider regarding performance and maintainability.
3. 3A colleague reports that a new CSS rule using `ul li a:hover` is causing jank on scroll. How would you verify if the selector complexity is responsible and what alternatives could you propose?

5-8 years experience

1. 1You are leading the front‑end performance optimization for a large e‑commerce site that uses a CSS framework with many deep descendant selectors. How would you approach auditing and refactoring the stylesheet to reduce selector depth while preserving the design system?
2. 2The rendering team is debating whether to enforce a rule limiting selector depth to three levels. What are the potential performance gains, and what edge cases might break if you enforce this rule across multiple legacy modules?
3. 3Explain how overusing descendant combinators can affect the browser's style recalculation and layout in a single‑page application that dynamically injects thousands of DOM nodes.

8+ years experience

1. 1Your organization is planning a migration from a monolithic CSS codebase to a design‑system‑driven approach. How would you convince leadership to invest in tooling or lint rules that prevent excessive descendant selectors, and what long‑term maintenance benefits would you highlight?
2. 2Across several product teams, you notice inconsistent use of deep selectors causing performance regressions in critical paths. Design a cross‑team policy and automated CI check that balances developer flexibility with selector performance.
3. 3In a high‑traffic web app, you need to ensure CSS performance scales with user growth. Discuss architectural strategies (e.g., CSS modules, atomic CSS, critical CSS extraction) that mitigate the risks of descendant selector overuse at scale.