Why is excessive nesting an anti-pattern?

Excessive nesting is considered an anti-pattern because it degrades CSS quality and leads to maintenance problems. The main reasons:

#1. Growing specificity and a "fragile" cascade

Deeply nested selectors automatically increase specificity. This leads to a situation where any small edit needs an even "stronger" selector. The result: fighting the styles and the cascade instead of just working with them.

#2. Maintenance difficulty

When nesting reaches 4-6 levels, it becomes hard to tell where the styles came from and which elements they affect. Any change can hit unintended nodes, and the developer loses control.

#3. Coupling to the HTML structure

Deep nesting tightly couples CSS and the DOM. The smallest change to the HTML structure breaks the styles, because the selector's logic is "tied" to a specific path. This hurts flexibility and reuse.

#4. A bloated final CSS

A preprocessor unrolls nesting into long selectors. The deeper the nesting, the more repetition in the final CSS, meaning more weight, more duplication and slower loading.

Short conclusion: Nesting is useful only one or two levels deep for a logical structure. Anything deeper harms readability, reusability and code maintenance, and over time turns the styles into a heavy, poorly managed cascade.