Thí nghiệm táo bạo của một lập trình viên web khi hoàn toàn loại bỏ CSS classes khỏi website cá nhân đã châm ngòi cho các cuộc thảo luận về độ phức tạp ngày càng tăng của phát triển web hiện đại và liệu các phương pháp đơn giản hơn có thể tốt hơn hay không.
Lập trình viên này bắt đầu hành trình bất thường này sau khi nhận ra họ không tuân theo lời khuyên của chính mình về việc sử dụng các phần tử HTML tích hợp sẵn một cách hiệu quả hơn. Thay vì dựa vào các CSS classes truyền thống, họ đã tái cấu trúc toàn bộ trang web chỉ sử dụng HTML tag selectors, custom elements và custom attributes.
Custom Elements thay thế các Classes truyền thống
Phương pháp này tập trung vào việc sử dụng các HTML tags tùy chỉnh như note-pad và random-pattern thay vì áp dụng classes cho các phần tử div chung chung. Những tags tùy chỉnh này hoạt động mà không cần JavaScript, tận dụng tính chất progressive enhancement của HTML. Để tạo ra các biến thể styling, lập trình viên đã sử dụng custom attributes với các cặp key-value thực tế thay vì các quy ước đặt tên thường thấy trong các phương pháp như BEM.
*Custom elements: Các HTML tags không thuộc đặc tả tiêu chuẩn nhưng vẫn là HTML hợp lệ. Chúng cho phép lập trình viên tạo ra các phần tử semantic của riêng mình.*BEM: Một phương pháp đặt tên CSS viết tắt của Block, Element, Modifier.
So Sánh Phương Pháp Kỹ Thuật
| Phương Pháp Truyền Thống | Phương Pháp Không Dùng Class |
|---|---|
<div class="header-primary"> |
<header> với styling theo ngữ cảnh |
| Quy ước đặt tên BEM | Thuộc tính tùy chỉnh với cặp key-value |
| Cô lập component | Mối quan hệ phần tử theo ngữ cảnh |
| Utility classes | Thẻ HTML tùy chỉnh |
Phản ứng cộng đồng cho thấy kết quả trái chiều
Thí nghiệm này mang lại một số kết quả ấn tượng. Website cuối cùng chỉ sử dụng khoảng 5KB CSS cho toàn bộ trang web, và khả năng truy cập được cải thiện đáng kể do tăng cường tập trung vào semantic markup. Tuy nhiên, phản hồi từ cộng đồng cho thấy phương pháp này có những hạn chế rõ ràng.
Một lập trình viên đã thử phương pháp tương tự lưu ý rằng mặc dù nó hoạt động tốt cho các website kiểu document và dạy được những bài học quý giá về các tính năng CSS hiện đại, nhưng nó trở nên quá hạn chế và dễ vỡ đối với các ứng dụng phức tạp hơn. Cuối cùng họ đã quay lại với các phương pháp dựa trên component và utility frameworks.
Đây là một giải pháp vững chắc cho blogs và các ứng dụng có cảm giác document rõ rệt, nhưng đối với bất cứ thứ gì vượt ra ngoài đó, tôi thấy nó quá hạn chế và dễ vỡ.
Kết quả đạt được
- Kích thước CSS cuối cùng: ~5KB cho toàn bộ website
- Cải thiện khả năng tiếp cận thông qua việc tập trung vào semantic markup
- Cấu trúc HTML sạch hơn
- Loại bỏ 99% class (plugin syntax highlighting vẫn sử dụng class)
- Tăng cường sử dụng các tính năng CSS hiện đại (nesting,
:has(),where())
Nghịch lý phức tạp trong phát triển Web
Cuộc thảo luận đã làm nổi bật một mô hình thú vị trong phát triển web - chu kỳ liên tục giữa việc chấp nhận sự phức tạp và tái khám phá các phương pháp đơn giản hơn. Một số thành viên cộng đồng chỉ ra rằng HTML ban đầu được thiết kế như một ngôn ngữ chung cho các tài liệu điển hình, và hầu hết các website thực sự không cần nhiều hơn các phần tử mặc định.
Tuy nhiên, những người khác lại cho rằng các lập trình viên không phải là những người thúc đẩy sự phức tạp. Người dùng và nhà thiết kế hiện đại mong đợi các giao diện tương tác với hoạt ảnh mượt mà và trải nghiệm hình ảnh được đánh bóng, thúc đẩy các lập trình viên hướng tới các giải pháp tinh vi hơn ngay cả khi họ có thể thích các phương pháp đơn giản hơn.
Những thách thức thực tế xuất hiện
Bất chấp sức hấp dẫn về mặt triết học, một số vấn đề thực tế đã nổi lên. Lập trình viên không thể đạt được một website hoàn toàn không có class do các dependencies như syntax highlighting plugins. Ngoài ra, một số thành viên cộng đồng báo cáo các vấn đề tương thích mobile, với nội dung không hiển thị đúng trên màn hình nhỏ hơn.
Phương pháp này cũng đòi hỏi việc lập kế hoạch cẩn thận hơn so với các hệ thống component độc lập. Các lập trình viên cần suy nghĩ về mối quan hệ giữa các phần tử thay vì xử lý từng component một cách độc lập, điều này có thể thách thức đối với các đội lớn hơn với các mức độ kỹ năng khác nhau.
Thí nghiệm này đại diện cho một khám phá hấp dẫn về các nguyên tắc cơ bản của phát triển web, ngay cả khi nó có thể không thực tế cho mọi dự án. Nó đóng vai trò như một lời nhắc nhở rằng đôi khi việc lùi lại để xem xét các giả định của chúng ta về các thực hành tốt nhất có thể dẫn đến những hiểu biết có giá trị về các công cụ và phương pháp chúng ta sử dụng hàng ngày.
Tham khảo: This website has no class