Debug: CSS specificity conflicts and resolution

CSS styles not applying because higher-specificity selectors are overriding them.

Understanding and debugging CSS specificity:

/* Specificity: (inline, IDs, classes/attrs/pseudo-classes, elements/pseudo-elements) */

/* (0,0,0,1) - one element */
p { color: black; }

/* (0,0,1,0) - one class */
.text { color: blue; }

/* (0,0,1,1) - one class + one element */
p.text { color: green; }

/* (0,1,0,0) - one ID */
#main { color: red; }

/* (0,1,1,0) - one ID + one class */
#main .text { color: purple; }

/* (1,0,0,0) - inline style */
/* <p style="color: orange;"> */

Debugging steps:

1. DevTools: Inspect element > Computed tab > check which rule wins
2. Look for: IDs (highest), inline styles, !important
3. The cascade order (later wins if same specificity):

- Browser defaults
- External stylesheets
- Internal <style>
- Inline style=""
- !important (avoid!)

/* Fix strategies (from best to worst): */

/* 1. Use CSS layers (modern) */
@layer base, components, utilities;
@layer components { .btn { color: blue; } }
@layer utilities { .text-red { color: red; } } /* Wins */

/* 2. Increase specificity minimally */
.card .title { }  /* Instead of #card-title */

/* 3. Use :where() for zero specificity */
:where(.default-styles) p { color: gray; }
.custom p { color: blue; }  /* Easily overrides */

/* 4. Use :is() which takes highest specificity of its arguments */
:is(#sidebar, .widget) p { }  /* Specificity of #sidebar */

/* LAST RESORT: */
.thing { color: red !important; }  /* Avoid - creates specificity wars */

CSS specificity determines which rule wins when multiple rules target the same element. Understanding it prevents the common trap of escalating specificity with IDs and !important.

Debugging CSS styling issues