Một bài blog gần đây trình bày cách CSS hiện đại có thể thay thế chức năng JavaScript đã khơi mào những cuộc thảo luận sôi nổi trong cộng đồng lập trình viên. Bài viết giới thiệu các tính năng CSS tiên tiến như nesting, container queries và bộ chọn :has() để tạo ra các phần tử tương tác mà không cần JavaScript, nhưng phản hồi cho thấy sự chia rẽ sâu sắc về vai trò của CSS trong phát triển web hiện đại.
Các Tính Năng CSS Hiện Đại Được Thảo Luận:
- CSS Nesting: Được hỗ trợ chính thức trên tất cả các trình duyệt chính từ năm 2024
- Container Queries: Cho phép thiết kế responsive dựa trên kích thước phần tử
- Bộ chọn
:has(): Cung cấp khả năng chọn phần tử cha - Flexbox và Grid: Hệ thống layout hiện đại thay thế các phương pháp dựa trên float cũ
- CSS Variables: Thuộc tính tùy chỉnh cho việc tạo kiểu động
Sự Chia Rẽ Lớn Về CSS
Phản hồi từ cộng đồng làm nổi bật sự phân chia cơ bản trong cách các lập trình viên nhìn nhận CSS. Những người thực hành CSS có kinh nghiệm cho rằng nhiều lời phàn nàn xuất phát từ các lập trình viên chưa đầu tư thời gian để học ngôn ngữ này một cách đúng đắn. Họ chỉ ra rằng CSS đã phát triển đáng kể, với các tính năng như flexbox, grid và các bộ chọn hiện đại khiến những layout từng gây khó khăn giờ đây trở nên đơn giản.
Tuy nhiên, những người chỉ trích vẫn duy trì quan điểm rằng CSS về cơ bản vẫn còn khuyết điểm. Họ lập luận rằng bản chất cascading mang lại tên gọi cho CSS tạo ra những cơn ác mộng bảo trì trong các ứng dụng lớn. Cascade hoạt động tốt với các tài liệu đơn giản, nhưng các ứng dụng web hiện đại với hàng chục file CSS và nhiều lập trình viên phải đối mặt với những cuộc chiến specificity liên tục và xung đột style không mong muốn.
Khả Năng CSS Hiện Đại So Với Thách Thức Thực Tế
Các minh họa kỹ thuật trong bài viết gốc rất ấn tượng. Các tính năng như CSS nesting, đã chính thức có sẵn trên tất cả các trình duyệt chính, cho phép các lập trình viên viết stylesheet có tổ chức hơn. Container queries cho phép thiết kế responsive dựa trên kích thước phần tử thay vì kích thước viewport. Bộ chọn :has() cung cấp khả năng chọn phần tử cha mà các lập trình viên đã mong muốn trong hàng thập kỷ.
Tuy nhiên, việc triển khai thực tế cho thấy những thách thức đang diễn ra. Tính tương thích trình duyệt vẫn là mối quan tâm, ngay cả với các tính năng có sẵn rộng rãi. Đường cong học tập để thành thạo nhiều thuật toán layout của CSS - từ box model đến flexbox đến grid - tiếp tục làm bực bội các lập trình viên cần đưa ra kết quả nhanh chóng.
Cân nhắc về Tương thích Trình duyệt:
- Các tính năng "Baseline Widely Available" được hỗ trợ trên Chrome, Firefox, Safari và Edge
- Một số tính năng nâng cao vẫn yêu cầu progressive enhancement
- Hỗ trợ trình duyệt di động khác nhau đối với các thuộc tính CSS tiên tiến
- Hỗ trợ trình duyệt cũ vẫn là một cân nhắc đối với các ứng dụng doanh nghiệp
Quan Điểm Thay Thế JavaScript
Nhiều lập trình viên đã chấp nhận các giải pháp dựa trên JavaScript chính xác vì họ thấy CSS không thể đoán trước được. Các công cụ như Tailwind CSS đã trở nên phổ biến bằng cách cung cấp các utility class tránh được các vấn đề cascade CSS truyền thống. Các framework dựa trên component như React khuyến khích inline styles hoặc các giải pháp CSS-in-JS loại bỏ xung đột styling toàn cục.
Tôi thấy thật kỳ lạ khi mọi người không thích CSS đến vậy ở đây. Tôi đã học nó cách đây 25 năm và yêu thích nó. Tôi vẫn sử dụng nó thường xuyên và đánh giá cao sự phát triển liên tục của ngôn ngữ này.
Quan điểm này phản ánh khoảng cách kinh nghiệm trong cộng đồng. Các lập trình viên học CSS một cách kỹ lưỡng thường thấy nó mạnh mẽ và biểu cảm. Những người tiếp cận nó một cách tùy tiện hoặc dưới áp lực deadline thường gặp phải những khía cạnh bực bội hơn của nó.
Câu Hỏi Về Khả Năng Tiếp Cận Và Hiệu Suất
Cuộc thảo luận cũng đề cập đến những cân nhắc thực tế quan trọng. Trong khi các giải pháp chỉ dùng CSS có thể cải thiện hiệu suất bằng cách giảm kích thước bundle JavaScript, chúng có thể tạo ra thách thức về khả năng tiếp cận. Các phần tử tương tác phức tạp được xây dựng hoàn toàn bằng CSS có thể không giao tiếp đúng cách với screen reader hoặc hệ thống điều hướng bằng bàn phím.
Cách tiếp cận không dùng JavaScript thu hút người dùng quan tâm đến quyền riêng tư và những người có kết nối chậm hơn, nhưng nó chỉ đại diện cho một phần nhỏ người dùng web. Hầu hết các ứng dụng web hiện đại đều yêu cầu JavaScript cho chức năng cốt lõi, khiến cách tiếp cận chỉ dùng CSS trở thành một bài tập kỹ thuật thú vị hơn là một chiến lược phát triển thực tế.
Sự đánh đổi giữa CSS và JavaScript:
- Ưu điểm của CSS: Hiệu suất tốt hơn, không bị chặn bởi script, hoạt động ngay cả khi JavaScript bị vô hiệu hóa
- Ưu điểm của JavaScript: Hành vi dự đoán được hơn, công cụ debug tốt hơn, đóng gói component hiệu quả
- Khả năng tiếp cận: Các giải pháp chỉ dùng CSS có thể cần cân nhắc thêm cho trình đọc màn hình và điều hướng bàn phím
- Bảo trì: Codebase CSS lớn phải đối mặt với thách thức về cascade và độ ưu tiên
Nhìn Về Phía Trước
Cuộc tranh luận phản ánh những căng thẳng rộng lớn hơn trong phát triển web giữa chủ nghĩa lý tưởng và chủ nghĩa thực dụng. CSS tiếp tục phát triển với các tính năng mới giải quyết những điểm đau lịch sử. Các nhà cung cấp trình duyệt đang triển khai các tiêu chuẩn nhất quán hơn so với trước đây. Tuy nhiên, những thách thức cơ bản trong việc duy trì codebase CSS quy mô lớn vẫn tồn tại.
Cuộc thảo luận cộng đồng cho thấy rằng thay vì chọn phe, các lập trình viên có thể được hưởng lợi từ việc hiểu cả hai cách tiếp cận. CSS hiện đại cung cấp các công cụ mạnh mẽ cho các trường hợp sử dụng phù hợp, trong khi JavaScript vẫn thiết yếu cho các tương tác phức tạp. Chìa khóa nằm ở việc chọn công cụ phù hợp cho từng thách thức cụ thể thay vì tuân thủ các nguyên tắc tuyệt đối.
Tham khảo: lyn's epic blog posts tags How to no longer need javascript