கழற்றம் மற்றும் பரம்பரை எந்த பாணிகளைப் பயன்படுத்த வேண்டும் என்பதை எவ்வாறு தீர்மானிக்கின்றன?

Question

Accepted Answer

பல விதிகள் ஒரு கூறையை பாணிப்படுத்த முடியும் போது, இரண்டு பொறிமுறைகள் முடிவை தீர்மானிக்கின்றன: **கழற்றம்** (எந்த விதி வெற்றிபெறும்) மற்றும் **பரம்பரை** (எந்த பண்புகள் பெற்றோரிலிருந்து குழந்தைகளுக்கு செல்கின்றன).

## கழற்றம் — மோதல்களை தீர்ப்பது, வரிசையில்

வலையுலாவி முன்னுரிமை வரிசையில் சோதித்து வெற்றிகரமான அறிவிப்பைத் தேர்ந்தெடுக்கிறது:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## பரம்பரை — சில பண்புகள் குழந்தைகளுக்கு செல்கின்றன

சில பண்புகள் (பெரும்பாலும் **உரை-தொடர்புடைய**) சரிசெய்யப்பட்டவர்களால் தானாக பரம்பரம் செய்யப்படுகின்றன; பெரும்பாலும் அவை அல்ல.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**பரம்பரம்** சரியாக: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **பரம்பரை அல்ல**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## பரம்பரை வெளிப்படையாக கட்டுப்படுத்துதல்

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## கழற்றத்திற்குள் குறிப்பிடுதல் சுருக்கம்

குறைந்த குறிப்பிடுதல் விதி பின்னர் எழுதப்பட்டாலும் தোல்பை ஏன் இழக்க முடியும் என்பதே — குறிப்பிடுதல் மூல வரிசைக்கு *முன்* சோதிக்கப்படுகிறது। வரிசை (முக்கியத்துவம் → குறிப்பிடுதல் → மூல வரிசை) புரிந்துகொள்வது "என் பாணி பயன்படுத்தப்படவில்லை" ஏறக்குறைய ஒவ்வொரு வழக்கையும் விளக்குகிறது.

## ஏன் முக்கியம்

கழற்றம் மற்றும் பரம்பரை *CSS உண்மையில் எவ்வாறு தீர்க்கிறது* என்பதற்கான முக்கிய மாதிரி ஆகும்.

অগ்রাধிகார வரிசை அறிந்துகொள்வது மோதல்களை சரிசெய்கிறது, எந்த பண்புகள் பரம்பரம் செய்யப்படுகின்றன என்பதை அறிந்துகொள்வது `color`/`font` ஐ `body` இல் ஒரு முறை அமைக்க அனுமதிக்கிறது, மேலும் `inherit`/`initial`/`unset` துல்லியமான கட்டுப்பாட்டைக் கொடுக்கின்றன — ஒன்றாக அவை CSS ஐ கணிக்கக்கூடிய மாற்றாக அற்புதம் செய்கின்றன.