Tại sao UnoCSS?
Động lực
Chúng tôi khuyên bạn nên đọc bài viết Reimagine Atomic CSS được viết bởi người tạo ra UnoCSS, Anthony Fu, để hiểu rõ hơn về động lực đằng sau UnoCSS.
UnoCSS khác X như thế nào?
Windi CSS
UnoCSS được bắt đầu bởi một trong những thành viên nhóm Windi CSS, với rất nhiều cảm hứng lấy từ công việc chúng tôi đã làm trong Windi CSS. Mặc dù Windi CSS không còn được bảo trì tích cực (từ tháng 3 năm 2023), bạn có thể coi UnoCSS là một "thành công tinh thần" của Windi CSS.
UnoCSS kế thừa tính năng theo yêu cầu của Windi CSS, chế độ attributify, phím tắt, nhóm biến thể, chế độ biên dịch và nhiều thứ khác. Trên đó, UnoCSS được xây dựng từ đầu với tính mở rộng và hiệu suất tối đa, cho phép chúng tôi giới thiệu các tính năng mới như biểu tượng CSS thuần, attributify không giá trị, tagify, phông chữ web, v.v.
Quan trọng nhất, UnoCSS được trích xuất như một công cụ tạo CSS nguyên tử, nơi tất cả các tính năng đều tùy chọn, và dễ dàng tạo quy ước riêng, hệ thống thiết kế riêng và preset riêng - với sự kết hợp của các tính năng bạn muốn.
Tailwind CSS
Cả Windi CSS và UnoCSS đều lấy rất nhiều cảm hứng từ Tailwind CSS. Vì UnoCSS được xây dựng từ đầu, chúng tôi có thể có cái nhìn tổng quan tuyệt vời về cách CSS nguyên tử được thiết kế với các nghệ thuật trước đó và được trừu tượng hóa thành một API thanh lịch và mạnh mẽ. Với mục tiêu thiết kế khá khác biệt, nó không thực sự là một so sánh táo với táo với Tailwind CSS. Nhưng chúng tôi sẽ cố gắng liệt kê một vài điểm khác biệt.
Tailwind CSS là một plugin PostCSS, trong khi UnoCSS là một công cụ đồng nhất với một bộ sưu tập các tích hợp hàng đầu với các công cụ xây dựng (bao gồm một plugin PostCSS). Điều này có nghĩa là UnoCSS có thể linh hoạt hơn nhiều để được sử dụng ở những nơi khác nhau (ví dụ: Thời gian chạy CDN, tạo CSS tức thì) và có tích hợp sâu với các công cụ xây dựng để cung cấp HMR tốt hơn, hiệu suất và trải nghiệm nhà phát triển tốt hơn (ví dụ: Inspector).
Bỏ qua các đánh đổi kỹ thuật, UnoCSS cũng được thiết kế để hoàn toàn có thể mở rộng và tùy chỉnh, trong khi Tailwind CSS có nhiều ý kiến hơn. Xây dựng một hệ thống thiết kế tùy chỉnh (hoặc token thiết kế) trên Tailwind CSS có thể khó khăn, và bạn không thực sự không thể rời khỏi các quy ước của Tailwind CSS. Với UnoCSS, bạn có thể xây dựng hầu như bất cứ thứ gì bạn muốn với toàn quyền kiểm soát. Ví dụ: chúng tôi đã thực hiện toàn bộ các tiện ích tương thích với Tailwind CSS trong [một preset duy nhất](/vi/presets/wind3, và có rất nhiều preset cộng đồng tuyệt vời được thực hiện với các triết lý thú vị khác.
Nhờ sự linh hoạt mà UnoCSS cung cấp, chúng tôi có thể thử nghiệm rất nhiều tính năng sáng tạo trên đó, ví dụ:
- Biểu tượng CSS thuần
- Chế độ Attributify
- Nhóm biến thể
- Phím tắt
- Tagify
- Phông chữ web
- Thời gian chạy CDN
- Inspector
Do các mục tiêu thiết kế khác với Tailwind CSS, UnoCSS không hỗ trợ hệ thống plugin hoặc cấu hình của Tailwind CSS, có nghĩa là nó có thể khiến việc di chuyển từ một dự án Tailwind CSS được tùy chỉnh nặng nề khó khăn hơn. Đây là quyết định dự định để làm cho UnoCSS có hiệu suất cao và có thể mở rộng, và chúng tôi tin rằng đánh đổi này đáng giá.