Thư viện styled-components đã chuyển sang chế độ bảo trì vào tháng 3 năm 2023, khiến hàng nghìn ứng dụng production rơi vào tình thế khó khăn. Trong khi người bảo trì ban đầu nêu lý do về các vấn đề tương thích với React Server Components và mối lo ngại về hiệu suất, nhiều team thấy mình không thể nhanh chóng di chuyển khỏi các triển khai styled-components hiện có. Một fork tập trung vào hiệu suất mới đã xuất hiện, tuyên bố mang lại tốc độ render nhanh hơn 40% trong khi các team lên kế hoạch cho chiến lược di chuyển của họ.
Cải thiện hiệu suất
- Render nhanh hơn 40% so với styled-components gốc
- Hoạt ảnh nhanh hơn và chuyển tiếp ổn định hơn
- Khắc phục các vấn đề tương thích với streaming SSR của React 19
 |
|---|
| Bài viết thảo luận về các vấn đề hiệu suất với styled-components và khám phá các chiến lược di chuyển tiềm năng cho các nhà phát triển |
Cộng Đồng Đặt Câu Hỏi Về Phương Pháp CSS-in-JS
Thông báo này đã làm bùng phát lại các cuộc tranh luận về giá trị cơ bản của các giải pháp CSS-in-JS . Nhiều developer đang bày tỏ sự hoài nghi về toàn bộ phương pháp này, với một số người gọi đây là một trong những ý tưởng frontend tệ nhất của thập kỷ qua. Cuộc thảo luận cộng đồng cho thấy sự ưa chuộng ngày càng tăng đối với các giải pháp CSS truyền thống như CSS Modules và quy ước đặt tên BEM , cung cấp lợi ích phạm vi mà không có chi phí hiệu suất runtime.
CSS-in-JS có lẽ là ý tưởng tệ nhất xuất hiện trong 10 năm frontend vừa qua.
Một số developer chỉ ra rằng các vấn đề hiệu suất đã có thể dự đoán được từ đầu, đặt câu hỏi tại sao việc inject CSS runtime lại từng được coi là chấp nhận được khi static extraction luôn nhanh hơn.
Các Giải Pháp Thay Thế Đang Được Chú Ý
Cộng đồng đang tích cực thảo luận về các con đường di chuyển, với vanilla-extract nổi lên như một lựa chọn thay thế phổ biến. Công cụ này cung cấp cú pháp và khái niệm tương tự như styled-components nhưng biên dịch mọi thứ tại thời điểm build, loại bỏ hoàn toàn overhead runtime. Không giống như styled-components , vanilla-extract hoạt động trên các framework khác nhau và tạo ra các file CSS tiêu chuẩn với type safety cho design token.
Các developer khác đang quay trở lại với các giải pháp đơn giản hơn như CSS Modules kết hợp với các tính năng CSS hiện đại bao gồm layer và custom property. Những phương pháp này cung cấp lợi ích phạm vi component mà ban đầu thúc đẩy việc áp dụng CSS-in-JS mà không có các hình phạt hiệu suất.
Các Lựa Chọn Thay Thế Phổ Biến Cho Migration
- vanilla-extract: CSS-in-TypeScript không runtime với quá trình biên dịch tại thời điểm build
- CSS Modules: CSS có phạm vi với cách tiếp cận stylesheet truyền thống
- BEM + CSS Layers: CSS toàn cục với quy ước đặt tên và các tính năng CSS hiện đại
- Tailwind CSS: Framework CSS utility-first
Lập Trường Của React Team Ảnh Hưởng Đến Hướng Đi
Khuyến nghị chính thức của React team về việc sử dụng file CSS tĩnh cho style và inline style chỉ cho các giá trị động đã ảnh hưởng đáng kể đến cuộc thảo luận cộng đồng. Hướng dẫn này thể hiện sự thay đổi rõ ràng khỏi runtime CSS injection, xác nhận những lo ngại về hiệu suất mà một số developer đã có từ khi các thư viện CSS-in-JS lần đầu trở nên phổ biến.
Fork hiệu suất đóng vai trò như một cầu nối tạm thời cho các team có codebase lớn không thể ngay lập tức viết lại hệ thống styling của họ. Mặc dù nó cung cấp cải thiện hiệu suất tức thì, các maintainer nhấn mạnh đây là một giải pháp ngắn hạn rõ ràng được thiết kế để mua thời gian cho việc di chuyển thích hợp chứ không phải là cam kết bảo trì dài hạn.
Cuộc trò chuyện rộng lớn hơn phản ánh một hệ sinh thái frontend đang trưởng thành, nơi việc thử nghiệm ban đầu với CSS-in-JS đang nhường chỗ cho các phương pháp có ý thức về hiệu suất hơn, cân bằng trải nghiệm developer với hiệu quả runtime.
Tham khảo: Cut styled-components into pieces: This is our last resort