CSS :has() Và JavaScript State Handling Trạng thái Giao diện

Trong kỷ nguyên Web hiện đại, ranh giới giữa logic và hiển thị thường bị xóa nhòa bởi sức mạnh của các JavaScript Framework. Nhiều nhà phát triển có xu hướng “JS-hóa” mọi tương tác giao diện (UI interaction), dẫn đến việc lạm dụng state management cho những tác vụ hiển thị thuần túy.

Sự ra đời của selector :has() trong CSS không chỉ là một tính năng mới; nó đại diện cho một bước ngoặt trong tư duy thiết kế hệ thống frontend. Bài viết này sẽ phân tích chi tiết sự khác biệt về bản chất, hiệu suất và chiến lược áp dụng giữa CSS :has() và JavaScript State Handling.

1. Bản chất của CSS :has()

:has() là một relational pseudo-class, cho phép trình duyệt xác định một phần tử dựa trên các điều kiện về hậu duệ (descendants) hoặc các phần tử kế cận của nó.

Sự thay đổi trong tư duy chọn lọc

Trước khi có :has(), luồng ưu tiên của CSS là một chiều: Từ Cha đến Con.

• Truyền thống: .parent .child (Chọn con dựa trên cha).
• Với :has(): .parent:has(.child) (Chọn cha dựa trên sự hiện diện hoặc trạng thái của con).

Đây chính là “mảnh ghép cuối cùng” giúp CSS có khả năng phản ứng với cấu trúc DOM một cách linh hoạt mà trước đây bắt buộc phải dùng JavaScript để can thiệp vào class của phần tử cha.

2. So sánh Mô hình Tư duy: Declarative vs. Imperative

Sự khác biệt cốt lõi giữa hai phương pháp nằm ở cách tiếp cận lập trình:

Lập trình Khai báo (Declarative) với CSS

Khi sử dụng :has(), bạn chỉ cần mô tả “Giao diện sẽ trông như thế nào nếu điều kiện này xảy ra”.

CSS

/* Nếu form có bất kỳ input nào không hợp lệ, đổi màu border của chính form đó */
.form:has(input:invalid) {
  border: 2px solid red;
}

Trình duyệt tự động theo dõi trạng thái của input và cập nhật giao diện mà không cần lập trình viên can thiệp vào luồng thực thi.

Lập trình Mệnh lệnh (Imperative) với JavaScript

JavaScript yêu cầu bạn mô tả “Các bước để thay đổi giao diện”.

• Lắng nghe sự kiện input.
• Kiểm tra tính hợp lệ (validation).
• Tìm phần tử cha (DOM traversal).
• Thêm hoặc xóa class tùy theo kết quả.

JavaScript

input.addEventListener('input', () => {
  if (!input.checkValidity()) {
    form.classList.add('error');
  } else {
    form.classList.remove('error');
  }
});

3. Phân tích Rendering Pipeline và Hiệu suất

Luồng xử lý của JavaScript State

Khi JS thay đổi state, trình duyệt thường phải trải qua một chu kỳ tốn kém:

• JS Execution: Chạy logic xử lý.
• DOM Mutation: Thay đổi class hoặc attribute.
• Style Recalculation: Tính toán lại toàn bộ quy tắc CSS bị ảnh hưởng.
• Layout & Paint: Vẽ lại giao diện.

Luồng xử lý của CSS :has()

:has() hoạt động trực tiếp trong CSS Engine. Khi người dùng tương tác (như check vào một box), trình duyệt thực hiện việc khớp selector (selector matching) ngay trong giai đoạn tính toán style.

Lưu ý về hiệu năng: Dù tránh được JS execution, :has() không phải là “viên đạn bạc”. Browser vendors từng trì hoãn :has() nhiều năm vì lo ngại về hiệu suất. Việc quét ngược lên cây DOM (Parent re-evaluation) có thể gây tốn kém nếu:

• DOM quá sâu và phức tạp.
• Selector sử dụng các toán tử quá chung chung như * hoặc các tổ hợp lồng nhau cực sâu.

4. Khi nào nên ưu tiên CSS :has()?

:has() đạt hiệu quả cao nhất trong các tình huống Visual State (Trạng thái hiển thị đơn thuần):

• Form Validation: Thay đổi style của label, wrapper dựa trên trạng thái :invalid hoặc :placeholder-shown của input.
• Tương tác dựa trên Checkbox/Radio: Tạo các component như Accordion, Tab hoặc Modal đơn giản mà không cần dùng onClick.
• Grid/Layout thích ứng: Thay đổi layout của container dựa trên số lượng hoặc loại phần tử con hiện có.
• Hỗ trợ Accessibility (A11y): Tự động thay đổi giao diện dựa trên các thuộc tính ARIA (ví dụ: .nav:has([aria-expanded="true"])).

5. Giới hạn của CSS và Vai trò tất yếu của JavaScript

Mặc dù :has() rất mạnh mẽ, JavaScript vẫn là lựa chọn bắt buộc trong các kịch bản sau:

5.1. Quản lý trạng thái bất đồng bộ (Async State Management)

CSS hoàn toàn “mù tịt” trước các hoạt động diễn ra bên ngoài môi trường runtime của nó (như mạng lưới hoặc hệ thống tệp).

• Vòng đời của dữ liệu: Các trạng thái như IDLE (chờ), PENDING (đang tải), SUCCESS (thành công) và ERROR (lỗi) phụ thuộc vào phản hồi từ server.
• Hạn chế của CSS: CSS không thể tự truy vấn trạng thái của một Promise hay theo dõi tiến trình của một HTTP Request.
• Vai trò của JS: JavaScript đóng vai trò “người thông ngôn”. Nó nhận kết quả từ API, sau đó mới phản hồi ra DOM (ví dụ: thêm attribute data-state="loading"). Lúc này, CSS :has() có thể tiếp quản để hiển thị UI tương ứng, nhưng bản thân nó không thể khởi phát hay nhận biết quá trình này.

5.2. Logic nghiệp vụ đa biến (Complex Business Logic & Multi-variable State)

• Khả năng bảo trì: JavaScript (thông qua các thư viện quản lý state như Redux, Zustand) cho phép kiểm soát tập trung và dễ dàng kiểm thử (Unit Test). Trong khi đó, việc giấu logic nghiệp vụ trong CSS selector sẽ khiến việc debug trở nên cực kỳ khó khăn.
• Tính toán động: Nếu giao diện thay đổi dựa trên kết quả của một phép tính (ví dụ: tổng tiền giỏ hàng > 500$ thì mới hiện mã giảm giá), CSS không có khả năng thực hiện các phép toán logic phức tạp này.
• Trạng thái phân tán: Khi UI phụ thuộc vào nhiều nguồn dữ liệu cùng lúc (như: quyền hạn người dùng + số dư tài khoản + loại sản phẩm), việc cố gắng điều khiển bằng CSS sẽ dẫn đến các selector “thảm họa” như: .page:has(.user-admin):has(.balance-positive):has(.product-digital).

5.3. Điều phối hiệu ứng theo trình tự (Complex Animation Orchestration)

• Sự phụ thuộc thời gian (Timeline-based): Ví dụ: “Sau khi Modal mở xong (200ms), thì tiêu đề hiện ra (100ms), sau đó các nút bấm lần lượt trượt vào”. Việc kết hợp nhiều lớp :has() và transition-delay trong CSS rất dễ bị lỗi nếu cấu trúc DOM thay đổi nhỏ.
• Tương tác vật lý: Các hiệu ứng kéo thả (Drag-and-drop), cử chỉ phức tạp trên di động (Gestures) yêu cầu tính toán tọa độ liên tục theo thời gian thực, vượt xa khả năng khai báo tĩnh của :has().
• Sự kiện kết thúc (Event Hooks): JavaScript cung cấp các sự kiện như onAnimationEnd hoặc onTransitionEnd. Điều này cho phép lập trình viên dọn dẹp bộ nhớ, chuyển hướng trang hoặc kích hoạt một logic khác ngay khi hiệu ứng kết thúc — điều mà CSS thuần túy không thể thực hiện được.

5.4. Lưu trữ và đồng bộ hóa trạng thái (Persistence & Sync)

CSS không có bộ nhớ đệm (Cache) hoặc khả năng lưu trữ bền vững.

• Local Storage/Cookies: Để ghi nhớ việc người dùng đã đóng một banner quảng cáo hay chưa (cho những lần truy cập sau), JavaScript là công cụ duy nhất có thể tương tác với các API lưu trữ của trình duyệt.
• Đồng bộ hóa giữa các Tab: JavaScript có thể lắng nghe các thay đổi từ các Tab khác nhau (thông qua BroadcastChannel), giúp giao diện luôn đồng nhất mà không cần tải lại trang.

6. Tác động đến Kiến trúc Frontend (React/Vue/Angular)

Trong các framework hiện đại, chúng ta thường có thói quen đồng bộ hóa mọi thứ vào “State”. Tuy nhiên, :has() cho phép chúng ta “Giải phóng State”:

• Giảm Re-render: Thay vì trigger một đợt re-render toàn bộ component chỉ để thêm một class is-active, CSS có thể tự xử lý dựa trên sự kiện nội tại của DOM (như :focus-within hoặc :checked).
• Clean Code: Giảm bớt số lượng biến boolean trong component logic, giúp code tập trung vào nghiệp vụ hơn là hiển thị.

7. Bảng so sánh tổng kết

Tiêu chí	CSS :has()	JavaScript State Handling
Mô hình	Declarative (Khai báo)	Imperative (Mệnh lệnh)
DOM Mutation	Rất ít / Không có	Thường xuyên (Toggle class/attr)
Độ phức tạp logic	Thấp (Chỉ dành cho UI)	Cao (Phù hợp Business Logic)
Khả năng debug	Khó (Phụ thuộc DevTools Style)	Dễ (Breakpoints, Console, Vue/React DevTools)
Tốc độ thực thi	Nhanh (Native Browser Engine)	Phụ thuộc vào Main Thread của JS
Độ tương thích	Các trình duyệt hiện đại (90%+)	Tuyệt đối

8. Kết luận

CSS :has() không ra đời để thay thế JavaScript State Management. Thay vào đó, nó đóng vai trò tối ưu hóa sự phân tách giữa Logic nghiệp vụ và Logic hiển thị.

Một lập trình viên chuyên nghiệp nên sử dụng :has() để xử lý các tương tác giao diện nhanh, nhẹ và mang tính khai báo. Đồng thời, giữ JavaScript cho những nhiệm vụ quan trọng hơn như quản lý dữ liệu, kết nối server và điều khiển luồng nghiệp vụ. Việc kết hợp hài hòa cả hai sẽ tạo ra những ứng dụng web vừa mượt mà về trải nghiệm, vừa sạch sẽ về mã nguồn.