CSS specificity எப்படி கணக்கிடப்படுகிறது?

Question

Accepted Answer

பல விதிகள் ஒரே உறுப்பை இலக்கிட்ടால், **specificity** எது வெற்றி பெறும் என்பதை தீர்மானிக்கிறது. இது selector இன் பகுதிகளிலிருந்து கணக்கிடப்பட்ட ஒரு மதிப்பு, 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** எந்த எண்ணிக்கையிலான **classes** ஐயும் விட சக்திவாய்ந்தது; ஒரு class எந்த எண்ணிக்கையிலான elements ஐயும் விட சக்திவாய்ந்தது. (கீழ் স்তரங்களை உயர் நிலை மீறிக்கொள்ள "சேர்க்க" முடியாது.)
- specificity **சமம்** என்றால், பின்னால் தோன்றும் விதி மூல ஆவணத்தில் வெற்றி பெறுகிறது (மூல வரிசை).
- **`!important`** சாதாரண specificity ஐ முழுவதுமாக மீறிவிடுகிறது — இறுதி வழி, மீறுவது கடினம் (மேலும் `!important` தேவை அதிக specificity உடன்).

```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 மோதல் — மேலும் குறிப்பிட்ட விதி வேறு இடத்தில் வெற்றி பெறுகிறது.

selectors ஐ குறைந்த மற்றும் தட்டையாக வைத்திருப்பது (ஒற்றை classes க்கு முன்னுரிமை கொடுங்கள், ids மற்றும் `!important` ஐ தவிர்க்கவும்) specificity ஐ கணிக்கக்கூடியதாக வைக்கிறது, எனவே styles மீறுவதற்கும் பராமரிக்க எளிதாக இருக்கிறது.