{
    "slug": "css_cascade",
    "term": "CSS Cascade, Specificity & Inheritance",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "How browsers decide which CSS rule wins — cascade layers, origin, specificity score, and source order all play a role.",
    "long": "The cascade resolves conflicts through a priority order: !important from user agent > !important from author > author styles > user styles > user agent styles. Within author styles, specificity wins: inline styles (1,0,0,0) > IDs (0,1,0,0) > classes/attributes/pseudo-classes (0,0,1,0) > elements/pseudo-elements (0,0,0,1). Equal specificity: last rule wins. Inheritance: some properties (color, font-size, line-height) inherit from parent elements by default; others (border, margin, padding) do not. CSS Layers (@layer) allow explicit cascade ordering without specificity battles — framework styles in a lower layer, application styles above. The :where() selector has zero specificity, :is() takes the highest of its arguments. Understanding cascade prevents '!important wars' in large stylesheets.",
    "aliases": [
        "CSS cascade",
        "CSS specificity",
        "cascade algorithm"
    ],
    "tags": [
        "frontend",
        "css",
        "fundamentals"
    ],
    "misconception": "The last CSS rule always wins if specificity is equal. Source order is the final tiebreaker only — the cascade first evaluates origin (user-agent vs author vs user), then importance (!important), then specificity, then order. Understanding the full cascade prevents unexpected overrides.",
    "why_it_matters": "Understanding the CSS cascade — specificity, inheritance, and source order — prevents unexpected style overrides and the specificity wars that make stylesheets unmaintainable.",
    "common_mistakes": [
        "Using !important to fix specificity problems instead of restructuring selectors.",
        "Overly specific selectors (#nav ul li a.active) that are hard to override and brittle to HTML changes.",
        "Not understanding that inline styles beat all class-based styles without !important.",
        "Relying on source order instead of specificity when debugging unexpected style application."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_custom_properties",
        "html_semantic"
    ],
    "prerequisites": [
        "css_specificity",
        "css_custom_properties",
        "css_layout"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade",
        "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity"
    ],
    "bad_code": "/* Specificity wars — escalating !important arms race */\n.button { color: blue; }\n#header .button { color: red !important; }\n.button.primary { color: green !important; }",
    "good_code": "/* CSS Layers — explicit cascade order, no specificity fighting */\n@layer base, components, utilities;\n\n@layer base       { button { color: var(--color-primary); } }\n@layer components { .button { color: var(--color-accent); } }\n@layer utilities  { .text-red { color: red; } } /* wins by layer, not specificity */",
    "quick_fix": "Understand cascade order: origin (author > user > browser), then specificity, then source order — use @layer to control origin order without !important",
    "severity": "low",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_cascade",
        "html_url": "https://codeclaritylab.com/glossary/css_cascade",
        "json_url": "https://codeclaritylab.com/glossary/css_cascade.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[CSS Cascade, Specificity & Inheritance](https://codeclaritylab.com/glossary/css_cascade) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_cascade"
            }
        }
    }
}