CSS ネストの構文の選択に関するヘルプ

2 つの競合する構文のうち、どちらを仕様候補として推進すべきかを決定する際に、皆様のご協力が必要です。

Adam Argyle
Adam Argyle
X GitHub
Miriam Suzanne
Miriam Suzanne
X

CSS のネストとは、ルールセット内に CSS を追加できる便利な構文の追加です。SCSS、Less、Stylus を使用したことがある場合は、次のような記述を見たことがあるはずです。

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

プリプロセッサによって通常の CSS にコンパイルされると、次のような通常の CSS になります。

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

この構文の公式 CSS バージョンは強く検討されていますが、意見が分かれているため、コミュニティの皆様のご意見を参考にしたいと思います。この記事の残りの部分では、構文オプションについて説明します。最後にアンケートにご協力ください。

上記のネストの例を CSS ネストの構文として使用できないのはなぜですか？

最も一般的なネスト構文をそのまま使用できない理由はいくつかあります。

  1. あいまいな解析
    ネストされたセレクタの中には、プロパティやプリプロセッサとまったく同じように見えるものがあり、ビルド時に解決して管理できます。ブラウザ エンジンは同じアフォーダンスを持たないため、セレクタを緩く解釈しないでください。

  2. プリプロセッサの解析競合
    CSS のネスト方法は、プリプロセッサを破壊したり、既存のデベロッパーのネスト ワークフローを中断したりしてはなりません。これは、それらのエコシステムとコミュニティにとって混乱を招き、配慮に欠けることになります。

  3. :is() の待機
    基本的なネストでは :is() は必要ありませんが、複雑なネストでは必要です。セレクタリストとネストの簡単な概要については、例 3 をご覧ください。セレクタリストが先頭ではなくセレクタの中央にあるとします。このような場合、別のセレクタの中央にあるセレクタをグループ化するには :is() が必要です。

比較内容の概要

Google は CSS のネストを正しくしたいと考えており、その一環としてコミュニティを巻き込んでいます。以降のセクションでは、検討中の 3 つのバージョンについて説明します。次に、比較用にいくつかの使用例を説明します。最後に、どちらが好みかについて簡単なアンケートを実施します。

オプション 1: @nest

これは、CSS ネスト 1 で現在指定されている構文です。新しいネストされたセレクタを & で開始することで、追加スタイルをネストする便利な方法を提供します。また、@nest は、サブジェクトを追加するだけでなく、新しいセレクタ内の任意の場所に & コンテキストを配置する方法としても使用できます。柔軟で最小限ですが、ユースケースに応じて @nest または & を覚えておく必要があります。

オプション 2: @nest の制限

これは、2 つのネスト方法を覚えておく必要性を減らすために、より厳格な方法です。この制限付き構文では、@nest の後にのみネストを許可するため、追加専用の便利なパターンはありません。選択の曖昧さを排除し、覚えやすいネストの方法を 1 つ作成しますが、簡潔さを犠牲にして規則に従います。

オプション 3: かっこ

@nest の提案に関連する重複した構文や余分な混乱を避けるため、Miriam Suzanne と Elika Etemad は、追加の中かっこに依存する代替構文を提案しました。これにより、構文が明確になり、追加の文字は 2 文字のみで、新しい at ルールは必要ありません。また、ネストされた複数のセレクタを簡素化するために、必要なネストのタイプでネストされたルールをグループ化することもできます。

例 1 - 直接ネスト

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest always

.foo {
  color: #111;

  @nest & .bar {
    color: #eee;
  }
}

かっこ

.foo {
  color: #111;

  {
    & .bar {
      color: #eee;
    }
  }
}

同等の CSS

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

例 2 - 複合ネスト

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest always

.foo {
  color: blue;

  @nest &.bar {
    color: red;
  }
}

かっこ

.foo {
  color: blue;

  {
    &.bar {
      color: red;
    }
  }
}

同等の CSS

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

例 3 - セレクタリストとネスト

@nest

.foo, .bar {
  color: blue;

  & + .baz,
  &.qux {
    color: red;
  }
}

@nest always

.foo, .bar {
  color: blue;

  @nest & + .baz,
  &.qux {
    color: red;
  }
}

かっこ

.foo, .bar {
  color: blue;

  {
    & + .baz,
    &.qux {
      color: red;
    }
  }
}

同等の CSS

.foo, .bar {
  color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
  color: red;
}

例 4 - 複数レベル

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

    & > p {
      font-size: .9rem;
    }
  }
}

@nest always

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

    @nest & > p {
      font-size: .9rem;
    }
  }
}

かっこ

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

      {
        & > p {
          font-size: .9rem;
        }
      }
    }
  }
}

同等の CSS

figure {
  margin: 0;
}

figure > figcaption {
  background: hsl(0 0% 0% / 50%);
}

figure > figcaption > p {
  font-size: .9rem;
}

例 5 - 親のネストまたは件名の変更

@nest

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

@nest always

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

かっこ

.foo {
  color: red;

  {
    .parent & {
      color: blue;
    }
  }
}

同等の CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

例 6 - 直接ネストと親ネストを組み合わせる

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest always

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    @nest &.baz {
      color: green;
    }
  }
}

かっこ

.foo {
  color: blue;

  {
    .bar & {
      color: red;

      {
        &.baz {
          color: green;
        }
      }
    }
  }
}

同等の CSS

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

.bar .foo.baz {
  color: green;
}

例 7 - メディアクエリのネスト

@nest

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

または明示的に / 拡張

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

@nest always（常に明示的）

.foo {
  display: grid;

  @media (width => 30em) {
    @nest & {
      grid-auto-flow: column;
    }
  }
}

かっこ

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

または明示的に拡張されている

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

同等の CSS

.foo {
  display: grid;
}

@media (width => 30em) {
  .foo {
    grid-auto-flow: column;
  }
}

例 8 - グループのネスト

@nest

fieldset {
  border-radius: 10px;

  &:focus-within {
    border-color: hotpink;
  }

  & > legend {
    font-size: .9em;
  }

  & > div {
    & + div {
      margin-block-start: 2ch;
    }

    & > label {
      line-height: 1.5;
    }
  }
}

@nest always

fieldset {
  border-radius: 10px;

  @nest &:focus-within {
    border-color: hotpink;
  }

  @nest & > legend {
    font-size: .9em;
  }

  @nest & > div {
    @nest & + div {
      margin-block-start: 2ch;
    }

    @nest & > label {
      line-height: 1.5;
    }
  }
}

かっこ

fieldset {
  border-radius: 10px;

  {
    &:focus-within {
      border-color: hotpink;
    }
  }

  > {
    legend {
      font-size: .9em;
    }

    div {
      + div {
        margin-block-start: 2ch;
      }

      > label {
        line-height: 1.5;
      }
    }}
  }
}

同等の CSS

fieldset {
  border-radius: 10px;
}

fieldset:focus-within {
  border-color: hotpink;
}

fieldset > legend {
  font-size: .9em;
}

fieldset > div + div {
  margin-block-start: 2ch;
}

fieldset > div > label {
  line-height: 1.5;
}

例 9 - 複雑なネスト グループ「キッチン シンク」

@nest

dialog {
  border: none;

  &::backdrop {
    backdrop-filter: blur(25px);
  }

  & > form {
    display: grid;

    & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

@nest always

dialog {
  border: none;

  @nest &::backdrop {
    backdrop-filter: blur(25px);
  }

  @nest & > form {
    display: grid;

    @nest & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

かっこ

dialog {
  border: none;

  {
    &::backdrop {
      backdrop-filter: blur(25px);
    }

    & > form {
      display: grid;

      {
        & > :is(header, footer) {
          align-items: flex-start;
        }
      }
    }
  }

  {
    html:has(&[open]) {
      overflow: hidden;
    }
  }
}

同等の CSS

dialog {
  border: none;
}

dialog::backdrop {
  backdrop-filter: blur(25px);
}

dialog > form {
  display: grid;
}

dialog > form > :is(header, footer) {
  align-items: flex-start;
}

html:has(dialog[open]) {
  overflow: hidden;
}

投票時間

評価中の構文オプションの公正な比較とサンプル プレートになったとご理解いただければ幸いです。以下の内容をよくご確認のうえ、ご希望のオプションを以下でお知らせください。皆様が CSS のネストを、誰もが使いやすくなるような構文に進化させるためにご協力いただき、ありがとうございます。

アンケートにご協力ください