CSS Nesting được cải thiện với `CSSNestedDeclarations`

• Đặc tả CSS lồng nhau (CSS Nesting) đã bổ sung giao diện CSSNestedDeclarations, giúp giải quyết các vấn đề phát sinh do lồng nhau
• Ngoài ra còn có các cải tiến như các câu lệnh khai báo xuất hiện sau quy tắc style sẽ không còn bị đẩy lên phía trên nữa
• Được áp dụng từ Chrome 130, Firefox Nightly 132 và Safari Technology Preview 204

Các vấn đề của CSS lồng nhau trước khi CSSNestedDeclarations được đưa vào

• Đã từng có vấn đề khiến các câu lệnh khai báo lồng nhau hoạt động khác với kỳ vọng

.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}  

• Trong các phiên bản trước Chrome 130, background-color được áp dụng là red thay vì green
• Sau khi parse, quy tắc thực tế được áp dụng sẽ bị biến đổi như bên dưới

.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}  

• background-color: green; bị đẩy lên trên cùng với các câu lệnh khai báo khác, còn CSSMediaRule lồng nhau được bọc trong một CSSStyleRule bổ sung dùng selector &
• Nguyên nhân là do engine CSS không thể phân biệt giữa các thuộc tính xuất hiện ở phần đầu của quy tắc style và các thuộc tính xuất hiện giữa những quy tắc khác

Cách giải quyết - đưa vào giao diện CSSNestedDeclarations

• Nhóm làm việc về CSS đã đưa vào quy tắc khai báo lồng nhau (nested declarations rule) để giải quyết vấn đề này
• Từ Chrome 130, các câu lệnh khai báo được lồng liên tiếp sẽ tự động được bọc trong một instance CSSNestedDeclarations
• Nhờ vậy, có thể giữ vị trí của khai báo background-color: green ở sau khai báo background-color: red
• CSSNestedDeclarations khớp với cùng phần tử và pseudo-element như quy tắc style cha, đồng thời cách hoạt động về specificity cũng giống hệt

Ảnh hưởng tới nhà phát triển

• Từ Chrome 130, CSS lồng nhau đã được cải thiện đáng kể
• Tuy nhiên, nếu trộn lẫn câu lệnh khai báo và quy tắc lồng nhau thì có thể cần chỉnh sửa mã

/* Không hoạt động trên Chrome 130 */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  

• Đoạn mã trên làm cho animation khi vào bị loại bỏ vì khai báo @starting-style bị ghi đè bởi các khai báo nằm trong CSSNestedDeclarations
• Cần sửa lại như sau

/* Hoạt động trên Chrome 130 */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  

• Khi dùng CSS lồng nhau, nếu đặt các khai báo lồng nhau lên trên các quy tắc lồng nhau thì sẽ hoạt động ổn trên phần lớn phiên bản trình duyệt

Phát hiện tính năng CSSNestedDeclarations

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarations를 지원하지 않음  
}  

Ý kiến của GN⁺

• CSS lồng nhau là một tính năng hữu ích giúp tăng khả năng đọc và bảo trì mã. Tuy nhiên đã từng có vấn đề do trộn lẫn quy tắc lồng nhau và câu lệnh khai báo, và thật may là việc đưa vào CSSNestedDeclarations đã giải quyết được điều này.
• Trước khi CSSNestedDeclarations được đưa vào, đã có vấn đề về việc vị trí của khai báo lồng nhau bị thay đổi hoặc bị ghi đè ngoài ý muốn. Đây là điểm có thể gây nhầm lẫn cho nhà phát triển.
• Các phương án khác như dùng quy tắc @nest hoặc bọc các khai báo lồng nhau trong CSSStyleRule cũng đã được cân nhắc, nhưng không được chọn vì những lý do như làm giảm trải nghiệm phát triển. Việc đưa vào quy tắc khai báo lồng nhau có vẻ là giải pháp phù hợp nhất.
• Tuy vậy, CSSNestedDeclarations hiện vẫn mới chỉ được hỗ trợ trên một số trình duyệt, nên để bảo đảm cross-browsing thì có lẽ an toàn hơn nếu luôn đặt các khai báo lồng nhau phía trên các quy tắc lồng nhau.
• Các CSS preprocessor như PostCSS, Sass cũng cung cấp tính năng tương tự CSSNestedDeclarations. Nếu đang dùng preprocessor, có thể cân nhắc tận dụng tính năng này.