Что такое cascade layers (@layer) и селекторы :is/:where?

Question

Accepted Answer

Эти функции дают вам **явный контроль** над **cascade** и **специфичностью** — напрямую решая проблему specificity-wars в больших кодовых базах.

## @layer — явное упорядочение cascade

`@layer` позволяет определить именованные слои, порядок которых *вы* контролируете. Стили в более позднем слое переопределяют более ранние слои **независимо от специфичности**:

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

Сила: утилита с низкой специфичностью в высоком слое может переопределить правило с высокой специфичностью в низком слое. Это означает, что вам больше не нужны `!important` или селекторные трюки для управления порядком переопределения — вы организуете CSS в слои (reset → framework → components → overrides) и порядок становится предсказуемым.

## :where() — нулевая специфичность

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

`:where()` соответствует своим аргументам, но не добавляет **никакой специфичности** — идеально для значений по умолчанию/сброса, которые каждый может легко переопределить:

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

## :is() — то же соответствие, принимает наивысшую специфичность

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

`:is()` сокращает длинные списки селекторов (как `:where()`), но **способствует** специфичности (его наиболее специфичного аргумента). Итак, используйте `:is()` для группировки, когда вам нужен обычный вес; `:where()` когда хотите, чтобы это было легко переопределяемо.

## :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 — **неконтролируемую специфичность**. `@layer` делает порядок переопределения явным и преднамеренным (больше нет эскалации `!important`), `:where()` создает значения по умолчанию/сброс, которые никогда с вами не конфликтуют, а `:is()` сохраняет сложные селекторы DRY.

Это основные инструменты для масштабируемой архитектуры CSS, дружественной к фреймворкам.