Cách CSS Nesting giúp bạn "chia tay" đống code lồng ghép rườm rà

Đã bao giờ bạn cảm thấy "phát hỏa" khi phải viết đi viết lại một cái tên lớp (class) dài dằng dặc chỉ để đổi màu cho cái nút nằm bên trong một cái thẻ div chưa? Trước đây, tụi mình thường phải cầu cứu đến các trình tiền xử lý (preprocessor) như SASS hoặc LESS mới làm được chuyện "lồng ghép" code cho gọn. Nhưng giờ đây, CSS Nesting đã chính thức đổ bộ lên các trình duyệt hiện đại, giúp bạn viết code sạch, dễ quản lý và chuyên nghiệp hơn hẳn mà không cần cài đặt thêm bất cứ công cụ rắc rối nào. Đây chính là một bước tiến lớn giúp các bạn đang học tại DIA DEMY tối ưu hóa quy trình làm việc của mình.

CSS Nesting là cái quái gì mà ai cũng nhắc tới?

Hiểu đơn giản, CSS Nesting (hay còn gọi là lồng ghép CSS) là khả năng viết các quy tắc CSS bên trong một quy tắc khác. Thay vì phải viết lặp đi lặp lại thẻ cha để trỏ đến thẻ con, bạn chỉ cần đặt thẻ con ngay trong dấu ngoặc nhọn của thẻ cha. Nó giống như cách bạn sắp xếp các tệp tin vào từng thư mục riêng biệt thay vì để tất cả nằm ngoài màn hình chính vậy.

Việc này giúp cấu trúc file CSS của bạn trông giống hệt như cấu trúc HTML, cực kỳ dễ đọc và dễ bảo trì. Nếu bạn từng đọc bài Cách Tailwind CSS 4.0 giúp bạn code giao diện "nhẹ gánh" hơn, bạn sẽ thấy xu hướng hiện nay là làm sao để code càng tinh gọn càng tốt. CSS Nesting chính là câu trả lời cho những ai yêu thích CSS thuần túy nhưng vẫn muốn sự ngăn nắp của SASS.

Cách dùng CSS Nesting để "hack" năng suất code

Hãy nhìn vào sự khác biệt bên dưới để thấy CSS Nesting lợi hại thế nào nhé. Giả sử bạn có một thanh điều hướng (navigation bar) với các liên kết (links). Thay vì viết rời rạc, bạn có thể lồng chúng lại với nhau cực kỳ mượt mà.

/* Cách viết cũ: Rườm rà và dễ sai sót */
.nav {
  background: #fff;
}
.nav .nav-item {
  display: inline-block;
}
.nav .nav-item a {
  color: blue;
}

/* Cách viết mới với CSS Nesting: Gọn gàng, dễ nhìn */
.nav {
  background: #fff;
  & .nav-item {
    display: inline-block;
    & a {
      color: blue;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

Biểu tượng & (ampersand) ở đây đóng vai trò đại diện cho chính thẻ cha. Nó giúp trình duyệt hiểu rằng bạn đang muốn áp dụng kiểu cho thẻ con hoặc các trạng thái như hover, active. Nếu bạn muốn kiểm tra xem code mình viết có hoạt động đúng không, đừng quên ghé qua bài Cách Chrome DevTools giúp bạn "soi" UI và fix bug mượt như lụa để biết cách "bắt bệnh" CSS nhanh nhất.

Bí quyết ở đây là đừng lồng quá nhiều lớp. Theo kinh nghiệm của mình, lồng khoảng 3 cấp là đẹp nhất. Lồng sâu quá sẽ khiến code khó đọc và gây khó khăn cho việc ghi đè (override) sau này. Bạn có thể tham khảo thêm tài liệu chính thức tại MDN Web Docs về CSS Nesting để nắm vững các quy tắc nâng cao nhé.

Tại sao UI Designer cũng nên biết về CSS Nesting?

Nhiều bạn nghĩ rằng Designer chỉ cần vẽ đẹp trên Figma là đủ. Nhưng thực tế, khi bạn hiểu được cách CSS Nesting vận hành, bạn sẽ thiết kế các thành phần (components) có tính hệ thống hơn. Bạn sẽ bắt đầu tư duy theo kiểu "thẻ con này thuộc về khối cha kia", từ đó tạo ra những giao diện có cấu trúc chặt chẽ, giúp đồng đội Developer không phải đau đầu khi chuyển đổi từ bản vẽ sang mã nguồn.

Việc sử dụng CSS Nesting cũng giúp website tải nhanh hơn một chút vì file CSS được tối ưu tốt hơn, giảm thiểu các quy tắc thừa thãi. Trong thế giới thiết kế web hiện đại, tốc độ và sự tinh tế luôn đi đôi với nhau. Khi bạn làm chủ được công cụ này, bạn không chỉ là một người vẽ giao diện, mà còn là một người thấu hiểu cách sản phẩm của mình được hình thành ngoài đời thực.

Vậy là chúng mình đã cùng nhau khám phá sức mạnh của CSS Nesting rồi. Liệu đây có phải là dấu chấm hết cho các công cụ như SASS? Hay nó chỉ là một bước đệm cho những tính năng khủng hơn như Container Queries sẽ xuất hiện tiếp theo? Hãy thử áp dụng vào dự án ngay hôm nay và chia sẻ cảm nhận với mình nhé!