Nevermind

ネイティブCSS Nestingがついに登場！

4 分

1. 10年間使ってきた「非公式」機能

数年前にフロントエンドコードを書いたことがあれば、SassやLessをよく知っているはずです。これらのCSSプリプロセッサーには、ほぼすべての開発者に愛される機能があります。セレクターのネスト（Nesting） です。HTMLを書くように子セレクターのルールを親セレクターの内側へ記述でき、コードの可読性と構成を大きく改善します。

// Sass 语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

長年、この構文をブラウザーが理解できる通常のCSSへコンパイルするため、ビルドツールに頼ってきました。しかし今、状況は変わりました。

2. ネイティブCSS Nestingの登場

2023年初頭から、主要ブラウザーのChrome、Safari、Firefoxが相次いでネイティブのCSS Nesting Moduleへの対応を発表しました。つまり、前処理を一切せずに.cssファイルへ直接ネストしたルールを書けます。

上の例はネイティブCSSで次のように書けます。

/* 原生 CSS 语法 */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

そうです。Sassとまったく同じように見えます。

3. &の重要な役割

プリプロセッサーと同じく、&記号はネイティブのネストでも重要な役割を果たし、親セレクターを表します。疑似クラス、疑似要素、組み合わせセレクターを扱うときに特に便利です。

.card {
  background: white;
  border-radius: 8px;

  /* & 代表 .card */
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* & 代表 .card，组合成 .card.dark-mode */
  &.dark-mode {
    background: #333;
  }

  /* & 代表 .card，组合成 .card > .header */
  > .header {
    font-weight: bold;
  }
}

4. Sassとの小さいが重要な違い

Sassでは、.card { .title { ... } }のようにクラスセレクターを直接ネストできます。ネイティブCSS Nestingの初期仕様ではこれは認められず、ネストしたルールはすべて&、>、+、~などの記号で始める必要がありました。

最新仕様ではこの制限が緩和され、article { h1 { ... } }のように型セレクターを直接ネストできるようになりました。それでもクラスセレクターをネストするときは、意図を明確にして曖昧さを避けるため、&を使うのがベストプラクティスです。

/* 推荐写法 */
.article {
  & .author-name {
    font-style: italic;
  }
}

/* 不推荐的写法 (在某些早期实现或严格解析器中可能无效) */
.article {
  .author-name {
    font-style: italic;
  }
}

&を使うと、.author-nameが.articleの子孫であることを明確に表せます。

5. ブラウザー対応と今後

2023年9月時点で、主要なモダンブラウザー（Chrome 112+、Safari 16.5+、Firefox 117+）はすべてCSS Nestingに対応しています。つまり、本番環境でも段階的に使い始められます。

ネイティブCSS Nestingの登場は、Webプラットフォーム自体の進化における新たな重要な節目です。ビルドツールへの依存を減らし、CSS自体をより強力で表現豊かにすると同時に、フロントエンドを学び始めた開発者も、より直感的にスタイルコードを書いて理解できるようになります。

CSS CSS Nesting フロントエンド Web標準