Diagnose CSS that is not applying

Understand the likely causes

• Common causes include a wrong stylesheet URL, stale resource, misspelled class, an incorrect descendant relationship, unsupported syntax, or a declaration losing earlier cascade decisions. Specificity is only one part of that process.
• A correctly winning property may affect a different box than expected, while an inherited value can be replaced by a direct child declaration. Neither case is repaired reliably by appending !important.

1. Confirm the actual resource and target

Use the Network panel in the failing page to verify that the intended stylesheet loaded and that its response contains the changed rule. Check status, content type, request URL, and cache behavior before changing selectors. Do not clear every browser or application cache blindly; first compare the resource the browser received with the reviewed source. In Elements, select the exact element whose appearance is wrong. A heading inside a component can inherit styles from several ancestors, but only the chosen element’s actual matching rules explain its direct declarations.

2. Check matching, conditions, and grammar

Confirm that the selector matches the live DOM, including class spelling, case where relevant, and direct-child versus descendant relationships. Then inspect media, supports, container, or other conditions enclosing the rule. A valid query can intentionally be false at this viewport. Check whether the property value is accepted; adding specificity cannot make an invalid length or unsupported declaration valid. Toggle one local declaration in developer tools to test a hypothesis, then make the equivalent reviewed source change. Temporary tool edits are evidence and disappear on reload unless deliberately saved.

3. Trace the complete winning declaration

Read the computed property and its source. Compare origin and importance, layer order, specificity, scope proximity when relevant, and source order under the applicable cascade rules. For normal author declarations, an unlayered rule outranks a named-layer rule before specificity. Important layer order reverses. The complete local example keeps both candidates normal and in named layers: the later component layer supplies blue even though the base selector uses an id. This demonstrates one controlled cause without claiming that a class always defeats an id. Keep inherited values separate from directly matching declarations.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trace layer precedence</title>
<style>
@layer base, components; @layer base { #title { color: #8b0000; } } @layer components { .title { color: #174e9a; } }
</style>
</head>
<body>
<main><h1 id="title" class="title">Cascade diagnosis</h1></main>
</body>
</html>

The heading color is #174e9a.

4. Repair the smallest responsible contract

Correct the wrong URL, selector, condition, value, or layer ownership that the evidence identified. Avoid escalating selectors across the whole project to fix one component. If the property is winning but the layout is unchanged, inspect whether it applies to this display context and whether a child or containing block owns the dimension you meant to change. Remove obsolete overrides after the repair and reload the actual source. Keep the diagnostic change local so unrelated components do not acquire a new accidental dependency on it.

Keep it from recurring

• Document stylesheet and layer ownership, keep selector specificity modest, and review overrides with computed-style evidence. Add a representative state to component checks when a regression exposed an untested condition.