Cascade katmanları (@layer) ve :is/:where seçicileri nelerdir?

Question

Accepted Answer

Bu özellikler size **cascade** ve **specificity** üzerinde açık kontrol sağlar — büyük kod tabanlarında specificity savaşı sorununa doğrudan çözüm getirir.

## @layer — açık cascade sıralaması

`@layer` adlandırılmış katmanlar tanımlamanızı sağlar ve sırasını *siz* kontrol edersiniz. Daha sonraki bir katmandaki stiller, önceki katmanları **specificity'den bağımsız olarak** geçersiz kılar:

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

Güç: düşük-specificity'li bir utility'nin yüksek bir katmanda, yüksek-specificity'li bir kuralı düşük bir katmanda geçersiz kılabilmesidir. Bu, override sırasını yönetmek için `!important` veya selector hackleri kullanmak zorunda kalmayacağınız anlamına gelir — CSS'i katmanlar halinde organize edersiniz (reset → framework → components → overrides) ve sıra öngörülebilir olur.

## :where() — sıfır specificity

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

`:where()` argümanlarıyla eşleşir ancak **hiçbir specificity eklemez** — varsayılanlar/resetler için ideal olup herkes tarafından kolayca geçersiz kılınabilir:

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

## :is() — aynı eşleştirme, en yüksek specificity'yi alır

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

`:is()`, uzun selector listelerini kısaltır (`:where()` gibi) ancak **specificity'e katkıda bulunur** (en spesifik argümanının specificity'si). Yani `:is()` gruplandırma için normal ağırlık istediğinizde; `:where()` ise geçersiz kılınabilir olmasını istediğinizde kullanın.

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

## Neden önemli

Birlikte bu özellikler CSS'in en zor bakım sorununu çözer — **kontrolsüz specificity**. `@layer` override sırasını açık ve kasıtlı hale getirir (`!important` tırmanışı yok), `:where()` asla sizinle savaşmayan resetler/varsayılanlar yazar ve `:is()` karmaşık seçicileri DRY tutar.

Bunlar ölçeklenebilir, framework dostu CSS mimarisi için temel araçlardır.