CSS Nesting
Sass や Less でしか使えなかったネスト記法がブラウザネイティブのCSSで利用可能になった。コンポーネント単位でスタイルをまとめやすくなり、セレクターの繰り返しを大幅に削減できる。
概要
Sass や Less でしか使えなかったネスト記法がブラウザネイティブのCSSで利用可能になった。コンポーネント単位でスタイルをまとめやすくなり、セレクターの繰り返しを大幅に削減できる。
対応ブラウザ
デスクトップ
Chrome 120+
Edge 120+
Safari 17.2+
Firefox 117+
モバイル
Chrome Android 120+
Safari iOS 17.2+
Firefox Android 117+
基本構文
CSS
.card {
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
& .title {
font-size: 1.25rem;
font-weight: bold;
}
& .body {
color: #4b5563;
line-height: 1.6;
}
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (width >= 768px) {
display: grid;
grid-template-columns: auto 1fr;
}
}実務での使いどころ
-
コンポーネントスコープのスタイル
コンポーネントのスタイルをネストでグループ化し、関連するルールを一箇所にまとめる。保守性が向上。
-
ビルドツール不要のネスト
Sass・PostCSS なしでネスト記法を使用。開発環境のセットアップが簡素化される。
注意点
- ネストが深くなりすぎると可読性が低下する。3〜4階層以内に抑える。
- 初期仕様では要素セレクターの直接ネストに & が必要だったが、最新仕様では省略可能なケースが増えている。
アクセシビリティ
- ネスト構文はスタイルの書き方のみに影響し、アクセシビリティに直接影響しない。ただし、複雑なネストで意図しないスタイルが適用されないよう注意。