CSS specificity कसे गणना केली जाते?

Question

Accepted Answer

जेव्हा अनेक नियम एकाच घटकाला लक्ष्य करतात, तेव्हा **specificity** निर्धारित करते की कोण जिंकते. हे निवडक्यांचे भागांपासून गणना केलेले स्कोअर आहे, जे tuple `(ids, classes, elements)` म्हणून तुलना केले जाते.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

डावीकडून उजवीकडे तुलना करा; पहिला स्तंभ जो भिन्न आहे तो विजेता ठरवितो.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## मुख्य नियम

- एक **id** कितीही **वर्गांना** मिसळ देते; एक वर्ग कितीही घटकांना मिसळ देते. (आप निचल्या स्तरांचा "जोड" करून उच्च स्तरांना हराऊ शकत नाही.)
- जर specificity **समान** असेल, तर स्रोतामध्ये **नंतर** दिसणारा नियम जिंकतो (स्रोत क्रम).
- **`!important`** सामान्य specificity पूर्णतः दुरून ठेवते — एक अंतिम उपाय जो ओव्हरराइड करणे कठीण आहे (आपल्याला उच्च specificity सह दुसरा `!important` आवश्यक असेल).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## व्यावहारिक मार्गदर्शन

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## हे महत्वाचे का आहे

बहुतेक "माझी CSS का लागू होत नाही?" निराशा एक specificity संघर्ष आहे — अधिक विशिष्ट नियम दुसरीकडे जिंकत आहे.

निवडक् कमी आणि सपाट ठेवून (एकल वर्गांना अनुकूल करा, ids आणि `!important` टाळा) specificity अनुमानयोग्य ठेवते, म्हणून शैली ओव्हरराइड आणि राखणे सोपे राहते.