Digital Transformation
CSS Nesting
TL;DR: CSS Nesting adalah fitur CSS native yang mengizinkan penulisan selector di dalam selector induk, mirip Sass, tetapi tanpa build step. Per 2026, CSS Nesting sudah didukung mayor browser modern (Chrome 120+, Safari 17.2+, Firefox 117+) dan aman dipakai untuk produksi proyek Next.js dengan fallback minimal.
Apa itu CSS Nesting?
CSS Nesting menyederhanakan struktur stylesheet dengan cara mengelompokkan rule turunan di dalam selector induk. Sebelumnya, developer perlu menulis selector berulang (.card .title, .card .meta, .card:hover .title) atau memakai preprocessor seperti Sass. Sekarang, hierarki visual mengikuti hierarki DOM langsung di file .css.
Praktik standar di industri menunjukkan nesting paling berguna untuk komponen kecil. Untuk sistem styling besar, kombinasikan dengan CSS Cascade Layers supaya prioritas selector tetap predictable.
Cara Kerja
| Bentuk | Contoh |
|---|---|
| Selector turunan | .card { & .title { font-weight: 700; } } |
| Pseudo-class | .btn { &:hover { background: #111; } } |
| Media query | .grid { & { gap: 12px; } @media (min-width: 768px) { gap: 24px; } } |
| Selector induk eksplisit | .menu { & > li { padding: 8px; } } |
Symbol & opsional pada banyak kasus, tapi disarankan eksplisit untuk konsistensi tim. Spesifikasi resmi tersedia di CSS Nesting Module di W3C.
Kenapa Penting?
Untuk marketer dan pebisnis Indonesia yang mengelola website sendiri, CSS Nesting mengurangi ukuran file CSS rata-rata 10-20% dan mempercepat onboarding developer baru karena struktur lebih jelas. Di proyek Next.js, manfaat ini bertumpuk dengan optimasi Core Web Vitals karena CSS lebih kecil berarti LCP lebih cepat.
Pertanyaan Umum
Apakah CSS Nesting menggantikan Sass?
Tidak sepenuhnya. CSS Nesting menutup kebutuhan paling sering (nesting selector), tapi Sass masih unggul untuk variabel kompleks, mixin, dan loop. Banyak tim memakai keduanya secara hybrid.
Apakah aman dipakai di produksi?
Per 2026, dukungan browser mayor sudah di atas 92% (Chrome 120+, Safari 17.2+, Firefox 117+). Untuk audience Indonesia yang masih banyak pakai browser lama, sediakan PostCSS plugin postcss-nesting sebagai fallback build-time.
Istilah Terkait