After completing this lesson, you will be able to confidently do the following three things.

• ▸✅ Calculate the 4-part specificity score (inline > id > class > tag)
• ▸✅ Explain why !important is a last resort
• ▸✅ Flatten specificity using the BEM convention

Keep these goals as a checklist, and close the lesson once you can answer all of them.

The One-Line Summary

When multiple CSS rules apply to the same element, the rule with the higher Specificity wins. If they're equal, the rule written later wins.

Calculating the Score

Each selector is assigned a 4-digit score:

Selector                   Score (a,b,c,d)
─────────────────────────────────
* (universal)              0,0,0,0
Tag / pseudo-element       0,0,0,1
Class / pseudo-class / attribute  0,0,1,0
ID                         0,1,0,0
inline style               1,0,0,0
!important                 (special — overrides all)

Examples:

• ▸p → 0,0,0,1
• ▸.card → 0,0,1,0
• ▸.card p → 0,0,1,1
• ▸#main .card p → 0,1,1,1
• ▸<p style="..."> → 1,0,0,0
• ▸... !important → always wins

Common Conflicts

<button class="btn btn-primary" id="submit">Send</button>

.btn { background: gray; }            /* 0,0,1,0 */
.btn-primary { background: blue; }    /* 0,0,1,0 — same score but written later → wins */
button { background: white; }         /* 0,0,0,1 — loses */
#submit { background: red; }          /* 0,1,0,0 — highest → wins */

ID has the highest weight. That's why styling with an ID traps you in a situation where you can't override it later.

!important — Last Resort

.urgent { color: red !important; }

This ignores all other rules. Powerful, but do not overuse it. Once you use it in one place, !important starts proliferating elsewhere — and eventually you end up with a hell of !important vs !important conflicts.

When is it OK?:

• ▸Forcibly overriding third-party library styles
• ▸Utility classes (like Tailwind)
• ▸Everything else — solve it with specificity

Priority Summary

From highest to lowest:
1. !important (special)
2. inline style (style="...")
3. ID selector
4. Class / pseudo-class / attribute
5. Tag / pseudo-element
6. Universal (*)

If scores are equal, the rule written later wins.

Takeaway

Specificity is the rule for who wins when rules conflict. Using only classes gives you a nearly flat specificity → fewer conflicts. Overusing IDs and !important leads to a maintenance nightmare.

Knowing the concepts from this lesson lets you give specific instructions to AI. Instead of a vague "fix this," you make vocabulary-driven requests — and that's where token savings begin.

• ▸"Refactor this HTML/CSS by applying the Specificity — Who Wins? concept"
• ▸"Check accessibility and SEO in relation to Specificity — Who Wins?"
• ▸"Recreate the same result using Tailwind classes"

Why this reduces tokens

Without understanding the concept, you receive an AI answer and still have to ask "What does that mean?" again. That follow-up question is what burns tokens. Learn the concept once, and the conversation ends in one round.