📛 CSS Nesting

Panduan lengkap CSS Nesting untuk styling web modern

📌 Elements

💡 Nesting Fundamental

CSS Nesting memungkinkan Anda menulis rules CSS dalam struktur bersarang yang lebih intuitif, mirip dengan HTML.

nesting.css
/* Traditional CSS */
.header {
  background: #9333ea;
}

.header h1 {
  color: white;
}

/* Dengan CSS Nesting */
.header {
  background: #9333ea;

  & h1 {
    color: white;
  }
}

📝 Penjelasan Detail:

â€ĸ & - Nesting selector merujuk ke parent selector
â€ĸ Bisa nested hingga beberapa level (tapi jangan berlebihan)
â€ĸ Mendukung semua jenis selector (class, id, pseudo-class, dll)
â€ĸ Lebih mudah dibaca dan di-maintain untuk komponen kompleks

🛠ī¸ Features

nesting-features.css
/* Nesting dengan pseudo-class */
.button {
  background: #9333ea;
  color: white;

  &:hover {
    background: #a855f7;
  }

  &:active {
    transform: scale(0.98);
  }
}

/* Nesting media queries */
.card {
  padding: 1rem;

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

ℹī¸ Browser Support

CSS Nesting didukung di Chrome 112+, Firefox 117+, Safari 16.5+, Edge 112+. Untuk browser lama, bisa menggunakan PostCSS untuk kompilasi.

📊 Basic Tables

nesting-patterns.css
/* Multiple nesting */
.article {
  max-width: 800px;

  & h2 {
    color: #9333ea;
    margin-bottom: 1rem;

    & span {
      font-weight: normal;
    }
  }

  & p {
    line-height: 1.6;
  }
}

/* Nesting dengan combinators */
.menu {
  & > li {
    display: inline-block;
  }
}

📝 Penjelasan Detail:

â€ĸ & bisa digunakan dengan semua combinator (>, +, ~)
â€ĸ Bisa menggabungkan dengan pseudo-class/elements
â€ĸ Support nesting media queries dan container queries
â€ĸ Bisa digunakan bersama @scope dan @layer
â€ĸ Tidak meningkatkan specificity dibanding CSS biasa

🚀 Advanced Table

advanced-nesting.css
/* Nesting dengan @scope */
@scope (.card) {
  :scope {
    border: 1px solid #9333ea;
  }

  h2 {
    color: #a855f7;
  }
}

/* Nesting dengan @layer */
@layer components {
  .button {
    padding: 0.5rem 1rem;

    &--primary {
      background: #9333ea;
    }
  }
}

ℹī¸ Advanced Support

Fitur advanced seperti @scope dan @layer dengan nesting membutuhkan browser terbaru (Chrome 118+, Firefox 115+, Safari 17+).

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan nesting dengan bijak - maksimal 3-4 level kedalaman. Hindari nesting berlebihan yang membuat CSS sulit dibaca dan di-maintain.

best-practices.css
/* ✅ Good - Moderate nesting */
.card {
  border-radius: 8px;

  & .header {
    padding: 1rem;
    background: #9333ea;

    & h2 {
      color: white;
    }
  }
}

/* ❌ Avoid - Too deep nesting */
.page {
  & .content {
    & .article {
      & .header {
        & h1 {
          color: #9333ea;
        }
      }
    }
  }
}

📝 Penjelasan Detail:

â€ĸ Gunakan BEM dengan nesting - kombinasikan manfaat keduanya
â€ĸ Hindari over-qualification - jangan nested selector yang sudah spesifik
â€ĸ Group related styles - nesting bagus untuk komponen yang terkait
â€ĸ Perhatikan output CSS - nesting bisa menghasilkan CSS yang lebih besar
â€ĸ Gunakan tools - PostCSS atau Sass jika butuh kompatibilitas luas