The Hidden Danger of Nested Selectors
Nested selectors feel safe. After all, you’re being specific, right? But the truth is that selectors like ul li a or .container .card .title span are some of the most dangerous patterns in CSS.
These chains create implicit dependencies between unrelated components. If a designer removes one wrapper div, suddenly half your styles break. If marketing adds a new section with different markup, your carefully crafted selector no longer matches.
The Fragility Problem
Every level of nesting increases the chance of breakage. A selector with five parts has five potential points of failure. When HTML structure changes — which changes far more often than CSS — breaks a selector, the visual bug appears with no clear source.
Worse, these selectors encourage tight coupling. The navigation styles know too much about the exact DOM structure. The card component assumes it will always live inside a specific container. This violates the core principle of separation of concerns.
The Specificity Trap
Each additional element in the chain adds specificity weight. What starts as a simple link style becomes .header .nav ul li a with a specificity that’s nearly impossible to override without fighting back with even longer selectors or !important.
This creates a snowball effect. One nested selector forces another developer to write an even more nested one. Within months, the stylesheet becomes a maze of competing priorities.
The Modern Solution
Flat, class-based selectors eliminate these problems. Instead of relying on DOM position, rely on intention. A class like .nav-link works regardless of whether it’s in a header, sidebar, or footer.
When you must target children, prefer direct child combinators or :has() over long chains. Better yet, move the styling to the child component itself. Let each piece own its appearance.
The result is resilient CSS that survives redesigns, survives team changes, and survives time. Your styles stop breaking when markup evolves — because they were never dependent on it in the first place.
Great CSS doesn’t describe where something is. It describes what something is.