CSS Nesting chính thức: Viết CSS gọn như SCSS mà không cần preprocessor

Vấn đề với CSS truyền thống

CSS thuần không hỗ trợ lồng selector, nên khi style component phức tạp, code rất dài và khó bảo trì:

.card { ... }
.card h2 { ... }
.card p { ... }
.card .btn { ... }
.card .btn:hover { ... }

Cách viết này lặp lại .card nhiều lần, vừa rườm rà vừa dễ sai sót.

Cách viết với CSS Nesting

Với CSS Nesting, bạn có thể viết trực tiếp như SCSS:

.card {
  padding: 1rem;
  border: 1px solid #ddd;

  h2 {
    font-size: 1.25rem;
  }

  p {
    color: #555;
  }

  .btn {
    background: #007bff;
    color: white;

    &:hover {
      background: #0056b3;
    }
  }
}

Trình duyệt sẽ tự “biên dịch” sang CSS chuẩn, loại bỏ sự phụ thuộc vào SCSS/LESS.

Điểm khác biệt so với SCSS

• Chuẩn hóa: CSS Nesting tuân thủ W3C, đảm bảo tương thích lâu dài.
• Không cần build step: Dùng ngay file .css, không qua transpiler.
• Giới hạn cú pháp: Chỉ hỗ trợ nesting hợp lý, không có biến hay mixin như SCSS.

Ví dụ thực tế: menu đa cấp

.menu {
  list-style: none;
  padding: 0;

  li {
    display: inline-block;
    margin-right: 20px;

    a {
      text-decoration: none;
      color: #333;

      &:hover {
        color: #007bff;
      }
    }
  }
}

Code gọn gàng, dễ đọc, logic rõ ràng theo cấu trúc HTML.

Kết hợp pseudo-class và media query

CSS Nesting cho phép dùng pseudo-class và media query trực tiếp trong block:

.card {
  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }

  @media (max-width: 600px) {
    padding: 0.5rem;
  }
}

Hỗ trợ trình duyệt

Tính đến 2025, CSS Nesting đã được hỗ trợ trên Chrome, Edge, Safari và Firefox phiên bản mới nhất. Với dự án production, bạn nên kiểm tra Can I Use để chắc chắn về compatibility.

Best practice khi áp dụng

• Không lồng quá sâu (trên 3 cấp) để tránh code khó bảo trì.
• Kết hợp với CSS Variables để tăng khả năng tái sử dụng.
• Sử dụng nesting cho component-based design (card, form, menu).
• Giữ selector rõ ràng, tránh lồng tràn lan gây nặng performance.

Tóm tắt nhanh

• CSS Nesting cho phép viết CSS gọn và trực quan như SCSS.
• Không cần preprocessor, chạy trực tiếp trong trình duyệt hiện đại.
• Thích hợp cho component-based UI, form, menu, card…
• Đã được hỗ trợ tốt năm 2025, sẵn sàng áp dụng cho dự án mới.