HTML & CSS Interview Question #145

How do you debug CSS specificity and cascade problems?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Use browser developer tools to inspect the element, matched rules, computed styles, inherited values, cascade layers, and declarations that were overridden. This reveals which rule actually wins and why.

Detailed Explanation

Do not immediately add a more specific selector or !important. First determine whether the problem is source order, specificity, inheritance, a layer, an inline style, a media query, or a different selector than expected. Then fix the stylesheet architecture at the appropriate level.

Code Example

/* Instead of escalating repeatedly: */
#page .content .card .title {
    color: red !important;
}

/* Prefer a predictable component rule: */
.card-title {
    color: var(--heading-color);
}