CSS Nesting: Đã Đến Lúc “Bye Bye” SCSS/SASS Rồi Sao?

Lê Lân

25/07/2025

CSS Nesting: Hướng Dẫn Toàn Diện Cho Kiến Trúc CSS Hiện Đại

Mở Đầu

CSS nesting là một tính năng gốc của CSS đã chính thức được hỗ trợ trên tất cả các trình duyệt lớn từ năm 2023, mở ra một kỷ nguyên mới cho việc tổ chức và viết mã CSS dễ dàng, hiệu quả hơn.

Bạn có từng cảm thấy file CSS của mình trở nên dài dòng và khó đọc khi phải liên tục lặp lại các selector cha? Hoặc phải phụ thuộc vào SCSS/SASS cùng các công cụ build phức tạp chỉ để quản lý các style lồng nhau? CSS nesting chính là câu trả lời, cho phép bạn viết các selector con bên trong selector cha một cách trực tiếp.

Bài viết dưới đây sẽ phân tích chi tiết về CSS nesting, từ cú pháp cơ bản, cách sử dụng với các selector nâng cao, media queries cho tới so sánh với SCSS/SASS — đồng thời trình bày các ví dụ thực tiễn và best practices nhằm giúp bạn tận dụng tối đa tính năng này trong dự án của mình.

1. Giới Thiệu Về CSS Nesting

1.1 CSS Nesting Là Gì?

CSS nesting cho phép bạn lồng các selector con vào bên trong selector cha, tạo nên cấu trúc phân cấp tương ứng với cấu trúc HTML. Điều này loại bỏ việc phải lặp lại nhiều lần tên selector cha trong CSS, giúp code ngắn gọn và dễ bảo trì hơn.

Trước đây, để làm được điều này, các developer thường sử dụng CSS preprocessors như SCSS hoặc SASS. Nhưng giờ đây với việc hỗ trợ native CSS nesting từ Chrome 112+, Firefox 117+ và Safari 16.5+ (từ 2023 trở đi), bạn có thể sử dụng tính năng này trực tiếp trong CSS mà không cần công cụ build phức tạp.

1.2 Tại Sao CSS Nesting Quan Trọng?

Cải thiện khả năng đọc: Các selector được nhóm lại giúp giảm sự lộn xộn.

Giảm lặp lại mã: Không cần viết lại tên cha cho từng selector con.

Hỗ trợ trình duyệt gốc: Loại bỏ phụ thuộc vào preprocessors.

Dễ bảo trì: Chỉnh sửa style đồng nhất cho nhóm phần tử tương quan dễ dàng.

2. Cách CSS Nesting Hoạt Động

2.1 Cú Pháp Cơ Bản

.parent {
  color: blue;
  .child {
    font-size: 16px;
  }
}

Kết quả tương đương với:

.parent {
  color: blue;
}
.parent .child {
  font-size: 16px;
}

Cách viết này giúp bạn biên dịch nhanh và giữ cho CSS ngắn gọn, sạch sẽ.

2.2 Sử Dụng Selector & (Dấu &)

Dấu & tượng trưng cho selector cha hiện tại, rất hữu ích khi làm việc với pseudo-classes, pseudo-elements hoặc các selector kết hợp.

Ví dụ:

.button {
  background: navy;
  &:hover {
    background: darkblue;
  }
  &.active {
    border: 2px solid gold;
  }
  &::before {
    content: '★';
  }
}

&:hover nghĩa là .button:hover .

&.active nghĩa là .button.active .

&::before nghĩa là .button::before .

2.3 Lồng Media Queries Trong CSS Nesting

Media queries cũng có thể được đặt vào trong block selector, giúp nhóm các style phản hồi (responsive) một cách tiện lợi.

Ví dụ:

.container {
  width: 100%;
  @media (min-width: 768px) {
    width: 80%;
    .inner {
      padding: 20px;
    }
  }
}

3. So Sánh CSS Nesting Với SCSS/SASS

3.1 Điểm Giống Nhau

Cú pháp nesting tương tự, sử dụng block lồng nhau.

Selector cha được tham chiếu với dấu & .

Cải thiện khả năng tổ chức và đọc code.

3.2 Điểm Khác Biệt

Tính Năng	SCSS/SASS	Native CSS Nesting
Biến	Hỗ trợ biến `$primary-color`	Biến CSS tuỳ chỉnh `--primary-color`
Mixin	Có mixin tái sử dụng	Không có mixin (dùng biến và utility classes)
Vòng lặp, Hàm	Hỗ trợ vòng lặp, hàm phức tạp	Chỉ có hàm nội tuyến như `calc()`
Partial & Import	Tách file với partials, import mạnh mẽ	Hỗ trợ `@import` nhưng kém hiệu quả hơn
Cần bước build	Có bước biên dịch (compile)	Không cần build, chạy trực tiếp

3.3 Liệu CSS Nesting Có Thể Thay Thế SCSS/SASS?

CSS nesting đủ dùng cho hầu hết các dự án nhỏ và trung bình nhờ sự đơn giản và tiện lợi. Tuy nhiên, với các dự án lớn, phức tạp đòi hỏi nhiều logic, tái sử dụng hoặc tổ chức file rõ ràng, SCSS/SASS vẫn là lựa chọn ưu việt hơn.

4. Ví Dụ Thực Tiễn Với CSS Nesting

4.1 Ví Dụ: Component Card

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-4px);
  }

  .title {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 8px;
  }

  .content {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
  }

  .button {
    background: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;

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

  @media (max-width: 600px) {
    padding: 12px;

    .title {
      font-size: 1.25rem;
    }
  }
}

HTML đi kèm:

<div class="card">
  <h2 class="title">Card Title</h2>
  <p class="content">This is the card content.</p>
  <a href="#" class="button">Learn More</a>
</div>

Điểm nổi bật:

Selector con .title , .content , .button được lồng gọn trong .card .

Pseudo-class hover cho .card và .button .

Media query lồng trong .card để dễ dàng điều chỉnh responsive.

4.2 Ví Dụ: Menu Điều Hướng (Navigation)

.nav {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;

  .nav-item {
    text-decoration: none;
    color: #333;
    font-weight: 500;

    &:hover {
      color: #007bff;
    }

    &.active {
      color: #007bff;
      border-bottom: 2px solid #007bff;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

Demo này cho thấy sự tiện lợi khi thao tác với các trạng thái hover, active cùng thiết kế đáp ứng chỉ trong một khối CSS gọn gàng.

5. Best Practices Khi Dùng CSS Nesting

Hạn chế độ sâu của nesting: Tối đa 3-4 cấp để tránh specificity quá cao, gây khó khăn trong việc ghi đè style.

Sử dụng & hợp lý: Chỉ dùng khi cần tham chiếu đến selector cha như pseudo-class, state hoặc combinators.

Kết hợp với biến CSS custom properties: Dễ dàng tái sử dụng và điều chỉnh giá trị.

Kiểm tra tương thích trình duyệt bằng @supports selector(&) để fallback khi cần.

Tổ chức file CSS với
layer
: Quản lý độ ưu tiên và hạn chế xung đột style.

@layer base {
  .component {
    .child {
      color: blue;
    }
  }
}

Lưu ý: Tránh nesting quá sâu gây độ đặc hiệu CSS cao làm khó bảo trì và mở rộng.

6. Giới Hạn Của CSS Nesting

Hạn chế	Giải pháp Khuyến nghị
Không hỗ trợ mixin hay vòng lặp	Sử dụng utility classes hoặc framework như Tailwind CSS
Thiếu partials để tách file	Dùng cascade layers, BEM hoặc CSS Modules để tổ chức code
Các hàm CSS hạn chế	Sử dụng tính năng CSS mới như clamp(), color-mix() hoặc preprocessor khi cần
Specificity dễ tăng cao khi nesting sâu	Giữ nesting nông, lập kế hoạch selector hợp lý

7. Khi Nào Nên Tiếp Tục Dùng SCSS/SASS?

Dự án lớn, phức tạp yêu cầu mixin, vòng lặp hoặc logic trong CSS.

Mã nguồn cũ đang dùng SCSS/SASS.

Nhóm phát triển quen thuộc với hệ sinh thái Preprocessor.

Cần xử lý phân chia file modular rõ ràng.

Kết Luận

CSS nesting là một bước tiến lớn trong cách viết CSS hiện đại, giúp giảm thiểu sự lặp lại, tăng khả năng đọc hiểu và đơn giản hóa quy trình phát triển — đặc biệt khi kết hợp với các tính năng hiện đại khác như biến CSS, container queries và cascade layers.

Đối với nhiều dự án nhỏ và trung bình, CSS nesting đủ khả năng thay thế SCSS/SASS, làm giảm sự phụ thuộc vào công cụ build, tăng tốc độ phát triển. Tuy nhiên, trong các dự án lớn cần logic phức tạp, SCSS/SASS vẫn giữ vai trò quan trọng.

Bằng cách làm chủ CSS nesting và áp dụng các best practices, bạn sẽ có trong tay công cụ mạnh mẽ để viết stylesheet gọn nhẹ, hiệu quả và dễ bảo trì hơn bao giờ hết.

Hãy bắt đầu áp dụng CSS nesting ngay hôm nay để tận hưởng lợi ích mà nó mang lại!

Tham Khảo

MDN Web Docs: CSS Nesting

Can I Use: CSS Nesting

CSS-Tricks: A Guide to CSS Nesting

Rachel Andrew. "Modern CSS with Nesting: Native Nesting" (2023)

Smashing Magazine. "What Developers Need to Know About CSS Nesting" (2023)

June 23, 2024