Cad iad na cascade layers (@layer) agus na roghnóirí :is/:where?

Question

IT Interview Practice · Accepted Answer

Tugann na gné seo duit rialú soiléir ar an **cascade** agus ar an **spécificité** — ionsaí dhíreach ar an fhadhb chogadh-spécificité i mbonneagar mór cód.

## Cén fáth a bhíonn tábhacht air

Tugann `@layer` duit sraitheanna ainmnithe a shainiú agus a rialann **thú** an t-ord. Bhuaileann stíleanna i sraith níos déanaí na sraithe níos luaithe **beag beann ar spécificité** :

```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 */
```

An chumhacht: is féidir le fóntais íseal-spécificité i sraith ard ainmhíniú ard-spécificité a fhorgheal i sraith íseal. Ciallaíonn sé seo nach bhfuil gá agat a thuilleadh `!important` nó cleasanna roghnóir a bhainistiú ord forgheal — eagraíonn tú CSS i sraitheanna (athshocrú → creat → comhpháirteanna → forshruthaigh) agus tá an t-ord intuigthe.

## :where() — nialas spécificité

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

Meaitseálann `:where()` a argóintí ach ní chuireann sé **aon spécificité** leis — foirfe do bhréagáin / athshocruithe gur féidir le duine ar bith a fhorgheal go héasca :

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

## :is() — meaitseáil chéanna, glacann an spécificité is ard

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

Giorrúionn `:is()` liostaí roghnóir fada (cosúil le `:where()`) ach **má chuireann sé** ar an spécificité (an ceann de a argóint is sonrach). Mar sin `:is()` do ghrúpáil nuair is mian leat meáchan gnáth ; `:where()` nuair is mian leat é soforgheal.

## :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) */
```

Ar a chéile, réitíonn na gné seo fadhb chothrom CSS is deacra a chothromú — **spécificité doiléir**. Déanann `@layer` ord forgheal soiléir agus dearfach (níos mó escaláid `!important`), scríobhann `:where()` athshocruithe / réamhshocrú nach dtroidfidh siad leat, agus tugann `:is()` roghnóirí casta DRY.

Is uirlisí bunúsacha iad do ailtireacht CSS inscálach, atá cairdiúil don chreatlach.

Cén fáth a bhíonn tábhacht air

:where() — nialas spécificité

:is() — meaitseáil chéanna, glacann an spécificité is ard

:is vs :where

Ceisteanna gaolmhara