CSS Nesting native hoạt động thế nào?

CSS Nesting cho phép lồng selector trong CSS thuần, không cần Sass hay PostCSS.

.card {
  padding: 16px;

  & .title { font-size: 1.5rem; }        /* .card .title */
  &:hover  { border-color: var(--accent); }  /* .card:hover */
  &--wide  { grid-column: 1 / -1; }       /* KHÔNG hợp lệ — xem bẫy bên dưới */

  h2 { margin-block: 0; }                 /* relaxed syntax, bỏ được & */

  @media (min-width: 768px) { padding: 24px; }   /* lồng cả at-rule */
}

& đại diện cho selector cha. Từ relaxed syntax (Chrome 120+, Safari 17.2+, Firefox 117+) có thể bỏ & khi bắt đầu bằng tên thẻ hoặc ./#.

Lưu ý 1 — nối chuỗi không hoạt động. Trong Sass, &--wide sinh ra .card--wide. Trong CSS thuần không có phép nối chuỗi: &--wide là cú pháp sai. Phải viết đủ .card--wide.

Lưu ý 2 — specificity của & khi lồng nhiều selector. & gộp danh sách cha lại như :is(), nên lấy specificity của selector mạnh nhất:

.a, #b { & .c { } }   /* .c ở đây có specificity của #b */

Lưu ý 3 — lồng sâu vẫn là vấn đề. Nesting làm việc viết CSS chặt chẽ dễ hơn, nhưng lồng 4–5 tầng vẫn tạo selector mong manh y như thời Sass.

Giữ ở mức 2 tầng.