{
    "slug": "css_specificity",
    "term": "CSS Specificity",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "The algorithm browsers use to determine which CSS rule wins when multiple rules target the same element — calculated as a three-part score (ID, class, element).",
    "long": "Specificity is calculated as (ID count, class/attribute/pseudo-class count, element/pseudo-element count). Inline styles override everything except !important. #id (1,0,0) > .class (0,1,0) > div (0,0,1). When specificity ties, the last rule in source order wins. !important overrides all specificity but creates maintenance nightmares. The best practice is keeping specificity as low as possible, using classes (not IDs) for styling, and avoiding !important.",
    "aliases": [
        "CSS cascade",
        "specificity wars",
        "!important"
    ],
    "tags": [
        "frontend",
        "css",
        "styling"
    ],
    "misconception": "!important is a valid tool for fixing specificity issues — it creates specificity debt that compounds; the correct fix is lowering the competing rule's specificity.",
    "why_it_matters": "Uncontrolled specificity escalation is the root cause of most 'why won't my CSS apply?' questions and leads to increasingly complex selector chains and !important abuse.",
    "common_mistakes": [
        "Using ID selectors (#header) for styling — IDs have very high specificity and are hard to override.",
        "Adding !important to fix a specificity conflict — this is a symptom, not a fix.",
        "Deeply nested selectors (.nav ul li a:hover) — high specificity, brittle, hard to override.",
        "Not understanding that inline style specificity is higher than any stylesheet rule (except !important)."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_cascade",
        "css_custom_properties",
        "css_layout"
    ],
    "prerequisites": [
        "css_cascade",
        "css_custom_properties",
        "css_layout"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity"
    ],
    "bad_code": "/* Specificity escalation — each override needs a stronger selector: */\n#header .nav li a { color: blue; }         /* (1,1,2) */\n#header .nav li a.active { color: red; }   /* (1,2,2) — specificity war */\n#header .nav li a.active:hover { color: green !important; } /* gave up */",
    "good_code": "/* Low specificity — easy to override, easy to maintain: */\n.nav-link { color: blue; }          /* (0,1,0) */\n.nav-link--active { color: red; }   /* (0,1,0) — same specificity, last wins */\n.nav-link--active:hover { color: green; } /* (0,2,0) — minimal increase */",
    "quick_fix": "Keep specificity low and flat — use single class selectors; avoid ID selectors and !important; use CSS layers (@layer) or utility classes to manage specificity conflicts",
    "severity": "low",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_specificity",
        "html_url": "https://codeclaritylab.com/glossary/css_specificity",
        "json_url": "https://codeclaritylab.com/glossary/css_specificity.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 Specificity](https://codeclaritylab.com/glossary/css_specificity) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_specificity"
            }
        }
    }
}