CSS Nesting: Cuộc Cách Mạng Giúp Bạn Viết CSS Gọn Gàng Hơn Cả Dọn Nhà!

Lê Lân

06/07/2025

CSS Nesting: Hướng Dẫn Toàn Diện Về Tính Năng Thịnh Hành Năm 2023

Mở Đầu

CSS Nesting là một bước tiến lớn trong việc viết mã CSS, giúp tối ưu hóa cấu trúc và khả năng bảo trì của các tệp stylesheet, đồng thời giảm thiểu sự trùng lặp không cần thiết.

Trong phát triển web hiện đại, việc quản lý các quy tắc CSS trở nên phức tạp hơn khi dự án mở rộng. CSS Nesting – tính năng gốc của CSS ra mắt năm 2023 – cho phép lồng các selectors bên trong nhau một cách trực quan, mô phỏng cấu trúc phân cấp của HTML. Trước đây, điều này chỉ thực hiện được nhờ các preprocessor như SCSS hay SASS, nhưng giờ đây, với sự hỗ trợ rộng rãi của các trình duyệt, CSS Nesting đã chính thức trở thành một phần quan trọng trong bộ công cụ của lập trình viên front-end.

Nội dung bài viết sẽ giới thiệu chi tiết về CSS Nesting, cách sử dụng, so sánh với SCSS/SASS, các ví dụ thực tế cùng những lời khuyên quan trọng để bạn áp dụng hiệu quả trong dự án của mình.

Giới Thiệu CSS Nesting

CSS Nesting Là Gì?

CSS Nesting cho phép bạn viết các selectors con bên trong selector cha bằng cách sử dụng dấu ngoặc nhọn {} để nhóm chúng một cách hợp lý, giúp đoạn mã ngắn gọn và dễ đọc hơn.

Ví dụ cơ bản:

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

Sẽ tương đương với:

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

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

Cải thiện khả năng đọc: Các selectors có liên quan được nhóm lại với nhau, giảm sự lộn xộn.

Giảm lặp lại: Không cần viết lại selectors cha cho từng phần tử con.

Hỗ trợ trình duyệt gốc: Loại bỏ sự phụ thuộc vào preprocessors, góp phần đơn giản hóa quá trình phát triển.

Dễ dàng bảo trì: Cấu trúc mã gần với cấu trúc HTML giúp việc cập nhật dễ dàng hơn.

Lưu ý quan trọng: CSS Nesting được hỗ trợ bởi Chrome/Edge bắt đầu từ phiên bản 112+, Firefox từ phiên bản 117+, và Safari 16.5+.

Cách Hoạt Động Của CSS Nesting

Cú Pháp Cơ Bản

Bạn chỉ cần bao bọc selector con trong selector cha:

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

Sử Dụng Selector &

Selector & tương ứng với selector cha, rất hữu ích khi bạn muốn áp dụng pseudo-classes, pseudo-elements hay các combinators:

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

Lồng Media Queries

CSS Nesting cũng hỗ trợ lồng media queries bên trong selector cha:

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

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

Điểm Giống Nhau

Cả hai đều hỗ trợ cú pháp lồng selector giúp giảm sự lặp lại.

Sử dụng & để tham chiếu selector cha khi cần.

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

Điểm Khác Biệt

Tính Năng	SCSS/SASS	CSS Nesting (Native)
Biến (Variables)	Hỗ trợ biến như `$primary-color: #007bff;`	Dùng custom properties CSS ( `--primary-color` ) hỗ trợ động
Mixin	Hỗ trợ mixins tái sử dụng block code	Không hỗ trợ, dùng custom properties & utility classes thay thế
Vòng lặp & hàm	Hỗ trợ vòng lặp, hàm tính toán phức tạp	Chỉ hỗ trợ vài hàm cơ bản như `calc()` , không có vòng lặp
Quản lý file	Cho phép chia nhỏ file với partials và import	Hạn chế, chỉ có `@import` truyền thống, kém hiệu quả
Quy trình build	Cần biên dịch thành CSS thực thi trên trình duyệt	Không cần biên dịch, giảm phức tạp workflow

CSS Nesting Có Thay Thế Được SCSS/SASS?

CSS Nesting có thể thay thế cho nhiều chức năng nesting của SCSS/SASS trong các dự án nhỏ đến trung bình hoặc những dự án ưu tiên sự đơn giản và ít phụ thuộc.

Tuy nhiên, các tính năng nâng cao như mixins, vòng lặp, hay quản lý file modular vẫn là điểm mạnh của SCSS/SASS trong những dự án lớn, phức tạp hoặc nhóm phát triển cần chuẩn hóa cao.

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

Ví Dụ: Thành Phần Card Đơn Giản

.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;
    }
  }
}

Tương ứng với HTML:

<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>

Đặc điểm nổi bật:

Các selector con .title , .content , .button được lồng trong .card .

Sử dụng & cho trạng thái hover của .card và .button .

Lồng media query bên trong để xử lý responsive một cách trực quan.

Ví Dụ: Menu Điều Hướng Phản Hồi Nhanh

.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;
  }
}

Ví dụ trên minh họa sự tiện lợi trong việc nhóm các trạng thái hover, active và responsive trong một khối duy nhất.

Các Quy Tắc Và Lời Khuyên Khi Dùng CSS Nesting

Giới Hạn Độ Sâu Của Nesting

Tránh nesting sâu quá 3-4 cấp độ để tránh trình duyệt xử lý chậm và selector quá cụ thể.

/* Không nên */
.parent {
  .child {
    .grandchild {
      .great-grandchild {
        color: blue;
      }
    }
  }
}

/* Nên */
.parent .child {
  color: blue;
}

Sử Dụng `&` Một Cách Hợp Lý

Dùng & khi thực sự cần thiết (pseudo-classes, pseudo-elements, combinators) để mã sạch và dễ hiểu.

Kết Hợp Với Custom Properties

Khai báo các giá trị thường dùng bằng biến CSS để tái sử dụng dễ dàng và linh hoạt.

:root {
  --primary-color: #007bff;
}

.button {
  background: var(--primary-color);
  &:hover {
    background: darkblue; /* SCSS có thể hỗ trợ hàm thao tác màu tốt hơn */
  }
}

Kiểm Tra Tương Thích Trình Duyệt

Dùng @supports selector(&) để hỗ trợ fallback cho trình duyệt không hỗ trợ CSS nesting.

@supports selector(&) {
  .parent {
    .child {
      color: blue;
    }
  }
}

@supports not selector(&) {
  .parent .child {
    color: blue;
  }
}

Sử Dụng Cascade Layers

Quản lý sự ưu tiên và tránh xung đột bằng cách đặt các lớp CSS trong @layer .

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

Hạn Chế Của CSS Nesting

Không hỗ trợ mixins, vòng lặp: Bất tiện cho các tác vụ tái sử dụng mã phức tạp.

Thiếu công cụ quản lý file: Thiếu partials dẫn đến khó tổ chức mã cho dự án quy mô lớn.

Hàm CSS hạn chế: Không thể thực hiện các thao tác logic phức tạp như SCSS.

Vấn đề specificity: Nesting sâu có thể gây tăng specificity, khó ghi đè.

Khuyến nghị sử dụng các framework utility-first như Tailwind CSS để bổ sung khả năng tái sử dụng hoặc áp dụng BEM để tổ chức CSS hiệu quả.

Khi Nào Nên Chọn SCSS/SASS Thay Vì CSS Nesting?

Dự án lớn, nhiều thành viên cần modular hóa code.

Cần các tính năng nâng cao như vòng lặp, mixins, import partial.

Dự án tồn tại đã dùng SCSS/SASS không nên thay đổi ngay.

Đội ngũ quen thuộc với hệ sinh thái SCSS/SASS.

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 mã nguồn trở nên dễ đọc, dễ bảo trì và dễ mở rộng. Khi kết hợp với các tính năng mới như custom properties, container queries và cascade layers, CSS nesting trở thành một đối thủ xứng tầm của các preprocessor truyền thống trong nhiều trường hợp.

Tuy nhiên, để phát huy tối đa hiệu quả, bạn cần áp dụng đúng cách và hiểu rõ giới hạn của công nghệ này. SCSS hoặc SASS vẫn giữ vị trí quan trọng trong những dự án phức tạp hay lớn. Nhưng với sự phát triển của trình duyệt, CSS nesting hứa hẹn trở thành chuẩn mực trong tương lai gần, giúp lập trình viên viết stylesheets tốt hơn, nhanh hơn và dễ dàng hơn.

Hãy bắt đầu thử nghiệm CSS Nesting trong các dự án nhỏ và vừa, đồng thời theo dõi sự cập nhật của trình duyệt để tận dụng đầy đủ tiềm năng công nghệ này.

Tham Khảo

MDN Web Docs: CSS Nesting

CanIUse: CSS Nesting Support

CSS Tricks: A Guide to CSS Nesting

Official W3C Draft – CSS Nesting Module Level 3

Tailwind CSS Official Documentation