カスケードレイヤー (@layer) と :is/:where セレクターとは何ですか?

Question

Accepted Answer

これらの機能は、**カスケード**と**詳細度**に対して明示的な制御を提供します。大規模なコードベースにおける詳細度戦争の問題に直接対処します。

## なぜ重要なのか

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