Cascade layers (@layer) மற்றும் :is/:where செலெக்டர்கள் என்றால் என்ன?

Question

Accepted Answer

இந்த அம்சங்கள் **cascade** மற்றும் **specificity** மீது தெளிவான கட்டுப்பாட்டை உங்களுக்கு வழங்குகின்றன — பெரிய கோடுபேஸ்களில் specificity-யுத்த சমস்যையை நேரடியாக தாக்குகிறது.

## @layer — explicit cascade வரிசைப்படுத்தல்

`@layer` உங்களுக்கு பெயரிடப்பட்ட அடுக்குகளை வரையறுக்க அனுமதிக்கிறது, அதன் வரிசை *நீங்கள்* கட்டுப்படுத்துகிறீர்கள். பிந்திய அடுக்கில் உள்ள பாணிகள் முந்தைய அடுக்குகளை **specificity ஐ பொருட்படுத்தாமல்** தோல்வியடையச் செய்கிறது:

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

சக்தி: ஒரு உচ்চ அடுக்கில் குறைந்த-specificity utility ஒரு குறைந்த அடுக்கில் உচ்च-specificity விதிக்கு மேலாக செயல்படலாம். இதன் பொருள் நீங்கள் இனி மேலெழுதும் வரிசையை நிர்வகிக்க `!important` அல்லது selector hacks தேவைப்படாது — நீங்கள் CSS ஐ அடுக்குக்குள் ஒழுங்கமைக்கிறீர்கள் (reset → framework → components → overrides) மற்றும் வரிசை கணிக்கக்கூடியது.

## :where() — zero specificity

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` அதன் வாதங்களுடன் பொருந்துகிறது ஆனால் **specificity சேர்க்காது** — defaults/resets க்கு சிறப்பாக இருக்கிறது, அதை யாரும் எளிதாக மேலெழுத முடியும்:

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — same matching, highest specificity ஐ எடுக்கிறது

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` நீண்ட selector listings (`:where()` போல) சுருக்கமாக்குகிறது ஆனால் **specificity பங்களிக்கிறது** (அதன் மிக நির்দிஷ்ட வாதமாக). எனவே `:is()` grouping க்கு உபயோகிக்கவும் நீங்கள் சாதாரண எடையை விரும்பினால்; `:where()` இது mutable ஆக இருக்க விரும்பினால்.

## :is vs :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## ஏன் இது பொருத்தமாக இருக்கிறது

ஒன்றாக இவை CSS இன் கடினமான பரிபாலன சிக்கலை தீர்க்கிறது — **uncontrolled specificity**. `@layer` maneuvering வரிசையை explicit மற்றும் intentional (இனி `!important` escalation இல்லை) செய்கிறது, `:where()` resets/defaults எழுதுகிறது அவை நீங்கள் நடக்க முடியாது, மற்றும் `:is()` சிக்கலான selectors ஐ DRY வைக்கிறது.

இவை scalable, framework-friendly CSS architecture க்கான foundational tools ஆகும்.