Tương lai của CSS: Selector tiền tố lớp mới giúp nhắm mục tiêu nhiều lớp dễ dàng

CSS đang chuẩn bị giới thiệu một selector mới có tên Class Prefix Selector (.prefix-*), giúp các nhà phát triển web nhắm mục tiêu đến nhiều lớp có cùng tiền tố một cách dễ dàng. Tính năng này vừa được CSS Working Group thông qua tại cuộc họp ở Berlin và đang nằm trong bản đặc tả CSS Selectors Level 5.

Selector mới này hứa hẹn sẽ loại bỏ những đoạn code rườm rà và dễ vỡ như [class^="btn-"] hay việc phải liệt kê tất cả các lớp thủ công. Tuy nhiên, đây vẫn là một tính năng đang trong giai đoạn phát triển ban đầu, và bạn sẽ cần chờ thêm một thời gian nữa trước khi có thể sử dụng nó trong sản phẩm thực tế.

Vấn đề: Nhắm mục tiêu các lớp có cùng tiền tố

Khi đặt tên lớp (class) trong HTML, các nhà phát triển thường sử dụng tiền tố để nhóm các thành phần có liên quan với nhau. Bạn có thể đã quen thuộc với các lớp như .btn-primary, .btn-secondary, .btn-danger, v.v.

Để áp dụng một kiểu dáng cơ bản cho tất cả các nút này, bạn thường phải liệt kê chúng ra một cách thủ công hoặc thêm một lớp gốc .btn:

/* Thêm một lớp gốc */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* Hoặc liệt kê tất cả... khá tệ! */
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

Một số nhà phát triển thậm chí sử dụng các bộ chọn thuộc tính (attribute selectors) khớp chuỗi con, nhưng chúng có thể trở nên mong manh và khó đọc khi xử lý nhiều lớp trên một phần tử:

/* Hoạt động, nhưng có thể gây lỗi với khoảng trắng */
[class^="btn-"],
[class*=" btn-"] {
  padding: 0.5rem 1rem;
}

Giải pháp: Class Prefix Selector

Chỉ hai tuần trước, tại cuộc họp trực tiếp của CSS Working Group ở Berlin (tháng 8/2026), đã có quyết định bổ sung một Class Prefix Selector chuyên dụng vào đặc tả CSS Selectors Level 5. Ý tưởng ban đầu được đưa ra bởi Lea Verou vào năm 2024.

Cú pháp của nó cực kỳ đơn giản:

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

Phần -* ở cuối biến selector này thành Class Prefix Selector và nó sẽ khớp với bất kỳ lớp nào bắt đầu bằng tiền tố có dấu gạch ngang đó. Đây là một chiến thắng lớn cho các utility classes và design system, giúp bạn dễ dàng nhắm mục tiêu các nhóm phần tử liên quan mà không cần phải làm phình to HTML hoặc viết các bộ chọn thuộc tính mong manh.

Minh họa Class Prefix Selector trong CSS

Còn chuỗi rỗng thì sao?

Một câu hỏi thú vị xuất hiện trong các cuộc thảo luận là liệu .foo-* có nên khớp với chuỗi rỗng hay không. Điều này có nghĩa là liệu .foo-* có nên khớp với một phần tử chỉ có lớp .foo- hay không.

Mặc dù hành vi mặc định chính xác vẫn đang được hoàn thiện, nhưng hiện tại, selector được chỉ định để chỉ khớp với các lớp bắt đầu bằng tiền tố và có ít nhất một ký tự ngoài tiền tố (và ký tự đầu tiên đó không phải là dấu gạch ngang).

Vậy nên, class="foo-" sẽ KHÔNG được khớp bởi .foo-*, điều này là hợp lý. Selector tương tự cũng sẽ không khớp với class="foo--", có lẽ cũng ổn.

Còn các dấu phân cách khác?

Selector tiền tố lớp hiện được giới hạn ở các tiền tố phân tách bằng dấu gạch ngang. Các dấu phân cách khác, như _, có thể được thêm vào trong tương lai khi nhận được yêu cầu từ cộng đồng.

Một điều đã rõ ràng ngay lúc này, đó là phải có ít nhất một dấu phân cách. Các tiền tố tùy ý (như .foo*) sẽ không được phép vì ít nhất hai lý do:

• Bạn có thể vô tình chọn quá nhiều: .foo* cũng sẽ khớp với .footer
• Hiệu suất selector: Các trình duyệt thường tạo các nhóm cho class selector để khớp nhanh. Việc thêm các ký tự đại diện tùy ý sẽ phá vỡ tính năng tối ưu đó.

Tương tự, các ký tự đại diện ở giữa một selector (như .card-*-primary) cũng sẽ không được phép.

Hỗ trợ trình duyệt

Vì tính năng này mới chỉ được quyết định tại CSSWG F2F ở Berlin hai tuần trước, nên như bạn có thể đoán, hiện tại chưa có hỗ trợ từ bất kỳ trình duyệt nào. Để theo dõi tiến độ, bạn có thể tham khảo các vấn đề sau:

• Chromium (Blink): ❌ Không hỗ trợ. Theo dõi CrBug #543356377.
• Firefox (Gecko): ❌ Không hỗ trợ.
• Safari (WebKit): ❌ Không hỗ trợ.

Tính năng này vẫn đang trong giai đoạn đầu và cần được hoàn thiện thêm, vì vậy có thể sẽ mất một vài năm nữa trước khi bạn có thể sử dụng nó trong sản phẩm thực tế. Tuy nhiên, việc theo dõi tài liệu đặc tả và các cuộc thảo luận trên GitHub là một cách tốt để nắm bắt xu hướng phát triển của CSS, đặc biệt là với các nhà phát triển frontend tại Việt Nam — nơi cộng đồng ngày càng quan tâm sâu sắc đến các chuẩn web mới.

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

Bạn có thể phát hiện hỗ trợ tính năng này bằng quy tắc @supports thông thường:

@supports selector(.foo-*) {
  /* Trình duyệt có hỗ trợ */
}

Nếu bạn muốn trải nghiệm và cập nhật những thay đổi mới nhất của CSS, hãy theo dõi các bài viết và thảo luận từ CSS Working Group. Đây chắc chắn sẽ là một công cụ hữu ích giúp việc viết CSS trở nên sạch sẽ và hiệu quả hơn trong tương lai không xa.