UI hay Tailwind CSS chất liệu nào tốt hơn?
|
Cho đến bây giờ, ứng dụng web tiến bộ này đang sử dụng Material-UI, một giao diện người dùng rất trưởng thành và phổ biến cũng như thư viện UX. Material UI là một trong những bộ công cụ React-UI được sử dụng nhiều nhất, nếu không muốn nói là số một và cung cấp một bộ sưu tập tuyệt vời các vùng chứa, thẻ, thanh điều hướng và tất cả các loại thành phần khác tuân thủ các nguyên tắc về Material do Google Design xác định Show
Vì tôi không thay đổi bố cục cốt lõi và thiết kế trực quan của ứng dụng web của mình, nên bạn có thể thắc mắc tại sao tôi lại chọn Material-UI ngay từ đầu, vì trang này thoạt nhìn không thực sự giống một trang Material-site điển hình. Lý do là thư viện “Material-UI” cũng cung cấp lớp thành phần cốt lõi để sử dụng, cung cấp tất cả các lợi thế của thư viện như chủ đề, mà không có kiểu Vật liệu cố chấp Nhưng vì gần đây tôi đã bắt đầu sử dụng Tailwind, một “khung CSS ưu tiên tiện ích”, trong các dự án khác, nên tôi nhanh chóng nhận ra rằng những ưu điểm của Tailwind khiến nó trở thành ứng cử viên hàng đầu cho ứng dụng web cá nhân của tôi mát mẻ mới. Gió cùng chiều. cssTailwind có trải nghiệm thú vị tuyệt vời dành cho nhà phát triển. Nhưng không chỉ vậy, nó còn đảm bảo rằng bản dựng sản xuất chỉ sử dụng những lớp CSS thực sự được sử dụng. Nhờ có trình biên dịch tức thời hiện được cung cấp cùng với Tailwind. css, sử dụng công cụ linh hoạt hơn bao giờ hết thư viện thay thếTrước khi tôi đi vào chi tiết quá trình di chuyển từ Material-UI sang Tailwind. css, tôi sẽ viết ra danh sách các hệ thống thiết kế phù hợp cho Tailwind. css bao gồm MUI
Về cơ bản, bạn phải thêm tất cả các kiểu CSS cho Material-Tailwind dưới dạng nhập, cùng với các liên kết cho các biểu tượng cũng như phông chữ. Đối với Daisy-UI, tất cả những gì bạn phải làm là thêm nó làm plugin vào tệp confg của mình Cả hai thư viện sẽ được giảm xuống theo kiểu bạn thực sự sử dụng, do đó chúng không thêm bất kỳ chi phí nào Sự khác biệt giữa Material-UI và Tailwind. cssMột điểm khác biệt rõ ràng chính giữa hai thư viện là Material-UI cung cấp một kiểu cố định trong khi Tailwind. css cung cấp cho bạn một tập hợp các lớp tiện ích để tạo CSS, nhưng không có kiểu dáng cụ thể nào. Điều này có nghĩa là nếu bạn chủ yếu dựa vào Nguyên tắc về tài liệu, thì bạn sẽ phải xây dựng lại một số thành phần cốt lõi, chẳng hạn như các nút và trường văn bản, bằng Tailwind. css đầu tiên Bởi vì cả hai thư viện đều sử dụng các đơn vị khác nhau cho các chức năng chia tỷ lệ và giãn cách, nên lần lặp lại đầu tiên của quá trình di chuyển không phá vỡ quy trình xây dựng trông khá lạc lõng Nhìn chung, tôi mất khoảng 6 giờ mỗi đêm để chuyển sang Tailwind. css cho bản phát hành ổn định đầu tiên để xuất bản. Việc hoán đổi API của Material-UI được thực hiện nhanh hơn dự kiến và ứng dụng web tiến bộ hiện chỉ dựa vào Tailwind cho tất cả các kiểu Một màn trình diễn Ngọn hải đăng gần như hoàn hảoVì Material-UI đương nhiên lớn hơn Tailwind. css do thiếu tính năng thu nhỏ CSS cũng như chỉ giảm xuống chỉ CSS thực sự được sử dụng, tôi cũng đang nhắm đến điểm số cao hơn khi đo điểm chuẩn ứng dụng web với Lighthouse. Tôi chỉ sử dụng web. nhà phát triển/đo lường cho nhiệm vụ này, vì đây là công cụ khắt khe nhất liên quan đến hiệu suất mà người dùng cảm nhận được trong thế giới thực Trước khi di chuyển, tất cả các trang web đều đạt 100 điểm ngoại trừ hiệu suất, trong đó tôi đạt khoảng 75 đến 80 điểm cho mỗi phép đo. Sau khi di chuyển, giờ đây tôi có thể báo cáo hiệu suất từ 90 đến 95 điểm, tùy thuộc vào hiệu suất mạng biên của Vercel, nơi PWA được lưu trữ. Cảm ơn Tailwind. css, bây giờ tôi gần đạt được số điểm hoàn hảo, điều này khá ấn tượng khi xem xét trang web sử dụng khá nhiều kiểu dáng (mặc dù có vẻ như rất tối thiểu) cũng như phương tiện như video và hình ảnh Phần kết luận. nó có đáng không?Vâng chắc chắn. Quá trình chuyển đổi tổng thể chỉ mất vài giờ và dẫn đến hiệu suất đạt được trong thế giới thực và điểm chuẩn tốt hơn. Tôi sẽ tinh chỉnh một số khía cạnh hình ảnh trong những tuần tiếp theo để giải quyết những mâu thuẫn tiềm ẩn sau quá trình di chuyển, nhưng nhìn chung, tôi cảm thấy tự tin với phiên bản hiện tại khi xây dựng sản xuất Ghi chú của biên tập viên. Bài đăng này đã được cập nhật vào ngày 20 tháng 7 năm 2022 để bao gồm thông tin liên quan đến các phiên bản Bootstrap, Tailwind CSS và MUI mới nhất, cũng như để thêm phần thảo luận Xây dựng ứng dụng lối vào của bạn mà không cần dựa vào thư viện hiện có là điều tuyệt vời. Nhưng học cách triển khai các thư viện không chỉ giúp bạn tiết kiệm thời gian — nó còn giúp bạn xây dựng các bố cục đối xứng và rõ ràng mà không cần tốn nhiều công sức. Tất cả các thư viện này đều được xây dựng với chức năng đa trình duyệt Mặc dù có rất nhiều thư viện giao diện người dùng ngoài kia, nhưng có rất nhiều sự khác biệt giữa mỗi thư viện, từ khả năng truy cập đến khả năng mở rộng, trong số các tiêu chí khác Bài viết này sẽ xác định sự khác biệt chính giữa ba thư viện UI phổ biến. Bootstrap, Material UI (MUI) và Tailwind CSS Những gì chúng tôi sẽ bao gồm BootstrapBootstrap ban đầu được phát triển bởi Mark Otto và Jacob Thornton khi cả hai đang làm việc tại Twitter. Phiên bản đầu tiên ban đầu được phát hành vào thứ Sáu, ngày 19 tháng 8 năm 2011 Kể từ khi phát hành, thư viện đã thu hút được rất nhiều sự chú ý trong cộng đồng nhà phát triển, với khoảng 160 nghìn sao trên Github tại thời điểm viết bài này và hơn 1000 cộng tác viên tích cực Bootstrap lúc đầu sử dụng các mẫu thiết kế CSS và jQuery tùy chọn cho các thành phần của nó. Tuy nhiên, phiên bản gần đây nhất, Bootstrap 5, đã bỏ hỗ trợ jQuery để chuyển sang hỗ trợ JavaScript vanilla (thuần túy) Sử dụng thư viện BootstrapTích hợp Bootstrap vào một dự án mới hoặc dự án hiện có thật dễ dàng. Bạn có thể bắt đầu bằng cách bao gồm CDN của nó hoặc tải xuống các tệp nguồn của nó và liên kết chúng trong trang đánh dấu của bạn Cộng đồng nhà phát triển cũng cố gắng giúp đưa Bootstrap đến với tất cả các khung giao diện người dùng, bao gồm React, Vue. js và Svelte BootstrapVueBootstrapVue giúp bạn xây dựng các ứng dụng bằng Vue. js và Bootstrap 4. Nó cung cấp các triển khai toàn diện nhất cho các thành phần Bootstrap 4 và hệ thống lưới, nhưng hỗ trợ cho Bootstrap 5 hiện vẫn đang được phát triển Ngoài các thành phần Bootstrap cốt lõi, BootstrapVue bao gồm các tính năng bổ sung như bộ tải khung và các thành phần tải chậm hình ảnh. Nó cũng có tính năng hỗ trợ vượt trội cho các biểu tượng Bootstrap phản ứng, nhưng đối với React. js. Tuy nhiên, không giống như BootstrapVue, thư viện này không hỗ trợ các biểu tượng Bootstrap thông thường. Ngoài ra, không có thành phần bổ sung SveltesttrapSveltestrap cung cấp các thành phần Bootstrap 5 cho ứng dụng Svelte 3 mà không yêu cầu bạn sử dụng các lớp thành phần Bootstrap Bạn cũng nhận được một số thành phần tùy chỉnh không được gửi cùng với React theo mặc định, chẳng hạn như các thành phần mờ dần và ngoài khung vẽ của nó. Ngoài ra, bạn cũng có quyền truy cập vào các biểu tượng Bootstrap ngoài hộp Khả năng truy cập trong BootstrapLý tưởng nhất là Bootstrap được xây dựng để tuân thủ Nguyên tắc truy cập nội dung web tiêu chuẩn 2. 0 (WCAG 2. 0). Nhưng tất nhiên, hầu hết các yếu tố trợ năng cũng phụ thuộc vào cấu trúc đánh dấu của nhà phát triển, kiểu dáng bổ sung và tập lệnh được sử dụng Nhóm Bootstrap đã đủ công bằng để lưu ý cách đưa thêm các vai trò và thuộc tính trợ năng cho từng thành phần tương tác vào tài liệu của họ. Điều đó giúp các nhà phát triển dễ dàng nêu chính xác hơn chức năng của thành phần của họ Hỗ trợ Bootstrap cho trình đọc màn hìnhBootstrap cung cấp một lớp tiện ích (_______01) để ẩn nội dung một cách trực quan đồng thời giúp chúng có thể truy cập được bằng các công nghệ hỗ trợ như trình đọc màn hình Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnĐiều này rất hữu ích trong các tình huống cần chuyển tải thông tin bổ sung đến người dùng không trực quan Đây là một ví dụ
Mở rộng BootstrapTrong một số trường hợp, bạn có thể muốn thay đổi các kiểu Bootstrap hiện có để phù hợp hơn với nhu cầu của mình. Ví dụ: bạn có thể muốn thay đổi màu mặc định cho các thành phần khác nhau hoặc sửa đổi đường viền Có hai cách chính để giải quyết vấn đề này. sử dụng CSS tùy chỉnh hoặc sử dụng SASS Ghi đè các kiểu Bootstrap bằng tệp CSS tùy chỉnhSử dụng tệp CSS tùy chỉnh chắc chắn là cách giải quyết dễ dàng nhất khi mở rộng Bootstrap. Phương pháp này yêu cầu bạn tạo một tệp 2 bên ngoài và tham chiếu nó sau tệp CSS Bootstrap chính Đây là một ví dụ Tùy chỉnh kiểu Bootstrap bằng SASSSASS (bản định kiểu cú pháp tuyệt vời) về cơ bản là ngôn ngữ kịch bản tiền xử lý biên dịch thành CSS. SASS giúp tạo và sử dụng lại các biến CSS dễ dàng hơn. Hơn nữa, sự hỗ trợ của nó cho các tính năng khác như kiểu lồng nhau, mixin và mô-đun khiến nó trở nên phổ biến đối với các nhà phát triển Đối với những người không quen thuộc với SASS, quy trình này có vẻ khá phức tạp Bootstrap được viết bằng SASS, sau đó được biên dịch thêm thành CSS thuần túy, vì vậy điều này giúp các nhà phát triển quen thuộc với SASS dễ dàng sửa đổi và tinh chỉnh toàn bộ thư viện theo sở thích của họ Tuy nhiên, bạn nên tránh sửa đổi các tệp cốt lõi của Bootstrap bất cứ khi nào có thể và thay vào đó hãy tạo một tài liệu SASS tùy chỉnh nhập Bootstrap để bạn có thể sửa đổi và mở rộng nó Các bài viết hay khác từ LogRocket
Giao diện người dùng vật liệu (MUI) cho ReactMUI là một hệ thống Thiết kế Vật liệu để triển khai các ứng dụng dựa trên React, cung cấp một số lượng lớn các thành phần dựng sẵn có sẵn ngay lập tức để sử dụng trong sản xuất Hệ thống Material Design do Google tạo ra để giúp các nhà phát triển xây dựng trải nghiệm kỹ thuật số chất lượng cao cho Android, iOS, Flutter và web. Các ứng dụng trong trường hợp này được xây dựng để tuân theo các nguyên tắc, hành vi và hướng dẫn thiết kế như được ghi trên trang web chính thức Các nguyên tắc thiết kế cũng bao gồm các hướng dẫn về cách tạo các thành phần, màu sắc và các tùy chọn theo chủ đề để tuân theo, các khái niệm về cách tương tác và luồng hoạt ảnh nên như thế nào, kiểu chữ và các biểu tượng được đề xuất, cùng nhiều nguyên tắc khác Sử dụng thiết kế vật liệuCác nhà phát triển chính thức của Material Design cung cấp một bộ khung và gói cho cả ứng dụng di động và web. Trên thực tế, nó là hệ thống thiết kế mặc định trong các framework như Flutter và Kotlin Tuy nhiên, cộng đồng lập trình viên cũng đã xây dựng một số công cụ mã nguồn mở để hỗ trợ lập trình viên tích hợp Material Design vào nhiều web framework, trong đó có MUI MUI được thiết kế để trở nên hấp dẫn, với nhiều tùy chọn tùy chỉnh cho phép bạn dễ dàng xây dựng hệ thống thiết kế tùy chỉnh của riêng mình trên các thành phần của nó Hơn nữa, thư viện chứa nhiều thành phần không có trong các thành phần chính thức của Thiết kế Vật liệu, nhưng vẫn tuân thủ tiêu chuẩn thiết kế của nó Vuetify. Khám phá một công cụ nguồn mở khác cho Thiết kế Vật liệuVuetify là một Vue. khung dựa trên js cũng bao gồm nhiều yếu tố Thiết kế Vật liệu. Trong khi có nhiều Vue. js, Vuetify đã trở nên phổ biến đối với các nhà phát triển Vue vì nó dễ học hơn so với các khung khác Ngoài ra, Vuetify được thiết kế với mục đích là mô-đun, đáp ứng và hoạt động theo mặc định và đi kèm với một số chủ đề để lựa chọn Khả năng truy cập trong Thiết kế Vật liệu và các thư viện như MUIHệ thống Material Design của Google đã bao gồm các nguyên tắc trợ năng và các phương pháp hay nhất, đồng thời các thư viện và khung được tạo xung quanh hệ thống đó nhất định phải tuân theo chúng theo mặc định. Ngoài ra, hầu hết các thư viện này, như Vuetify và MUI, đều có một số tính năng bổ sung để tiếp tục tạo các ứng dụng phong phú và dễ tiếp cận Mở rộng Material Design với MUIThư viện MUI có một số phương pháp để tùy chỉnh và mở rộng các thành phần của nó. Một tùy chọn là bao gồm chỗ dựa 3 của thư viện và đặt giá trị của nó thành CSS ghi đè ưa thích của bạn. Dưới đây là một ví dụ về thành phần thanh trượt của nó Nó cũng bao gồm một thành phần 4 và 5, cho phép bạn thay đổi kiểu dáng và xác định một chủ đề riêng biệt cho mọi thành phần mong muốn. Để tìm hiểu thêm về khả năng tùy chỉnh và mở rộng MUI, nhóm đã tạo một Mở rộng thiết kế vật liệu với VuetifyViệc tùy chỉnh các thành phần Vuetify khá đơn giản. Bạn có thể dễ dàng sửa đổi các chủ đề thành phần trong quá trình khởi tạo thư viện bằng cách cung cấp trường chủ đề cho hàm tạo Vuetify Dưới đây là ví dụ về cách chúng tôi ghi đè màu thành phần cho cả chủ đề sáng và tối Nhóm Vuetify cũng đã phát triển một trình tạo chủ đề chuyên dụng cho phép bạn chỉ cần tạo và xuất các chủ đề cho ứng dụng của mình từ nhiều tùy chọn màu khác nhau CSS đuôi gióTailwind CSS là một khung giao diện người dùng tương đối mới, được phát hành lần đầu vào ngày 1 tháng 11 năm 2017, với phiên bản đầu tiên được tạo bởi Adam Wathan và Steve Schoger. Kể từ đó, thư viện đã thu hút được rất nhiều sự chú ý và thậm chí còn được các công ty lớn áp dụng, bao gồm Algolia và Mozilla Tailwind CSS khác với các thư viện CSS đã đề cập trước đó ở chỗ nó không trực tiếp cung cấp các thành phần giao diện người dùng. Thay vào đó, nó cung cấp các lớp tiện ích cấp thấp cho phép bạn tạo các thiết kế hoàn toàn độc đáo Thư viện này hoạt động bằng cách quét các tên lớp trong tất cả các tệp HTML, các thành phần JavaScript và các mẫu khác của bạn, sau đó tạo các kiểu có liên quan và ghi chúng vào một tệp CSS tĩnh Để hiểu điều này có nghĩa là gì, bên dưới là một ví dụ về cách tạo nút chính (màu xanh) trong Bootstrap so với. MÙI vs. CSS đuôi gió Ví dụ Bootstrap thuần túy MÙI ví dụ 0 Ví dụ CSS Tailwind 1 Như bạn có thể thấy, không giống như các thư viện khác, Tailwind cho phép bạn tùy chỉnh trực tiếp các phần tử của mình bằng cách sử dụng các lớp tiện ích. Bạn có thể chỉ định biến thể màu, màu nền khi di chuột theo cách thủ công, v.v. Khi bạn có các thành phần chung tuân theo cùng một mẫu thiết kế, ví dụ trên có thể khá mệt mỏi và tốn thời gian. Đây là lý do tại sao tồn tại một tùy chọn bổ sung để trích xuất các lớp thành phần. Đây là một ví dụ 2 Tuy nhiên, nên tránh làm điều này bất cứ khi nào có thể vì nó không phù hợp với mục đích của thư viện, đó là tránh phải viết mã CSS và đặt lại tên lớp cho các kiểu dáng đó Sử dụng CSS TailwindTailwind CSS có sẵn dưới dạng gói nút có thể được mở rộng dưới dạng plugin PostCSS. Nó cũng được phục vụ qua CDN, mặc dù CDN chỉ dành cho mục đích phát triển và không phải là lựa chọn lý tưởng cho sản xuất Gói nút có thể được tùy chỉnh để hoạt động với tất cả các khung giao diện người dùng JavaScript (React, Vue, Vite, v.v.), Laravel và thậm chí cả ứng dụng Ruby on Rails Khả năng truy cập trong Tailwind CSSTailwind CSS được xây dựng để hoạt động hiệu quả và có thể truy cập theo mặc định. Giống như Bootstrap, Tailwind bao gồm các lớp tiện ích bổ sung để cải thiện khả năng truy cập — đáng chú ý nhất là lớp trình đọc màn hình ( 6 và 7). Ví dụ 5 Ngoài ra, với các lớp tiện ích có điều kiện của Tailwind, bạn có thể tiến thêm một bước để ẩn hoặc hiện các mục cho trình đọc màn hình dựa trên trạng thái phần tử (tiêu điểm, di chuột, v.v. ) và độ phân giải thiết bị 6 Sử dụng Bootstrap với Tailwind hoặc MUIMặc dù không được khuyến nghị, nhưng có thể sử dụng một thư viện cùng với một thư viện khác Hãy lưu ý rằng các thư viện và khung khác nhau có tên lớp giống hệt nhau đằng sau hậu trường, chẳng hạn như cách các lớp 8, 9 và 0 tồn tại trong cả Bootstrap và Tailwind. Điều này có thể xung đột với thứ tự thiết kế của dự án của bạn Đây là một ví dụ về việc sử dụng Bootstrap kết hợp với Tailwind CSS 0 Trong ví dụ trên, nếu chúng ta sử dụng một lớp tiện ích tồn tại trong cả hai thư viện, kiểu dáng của Tailwind sẽ được áp dụng chủ yếu. Điều này là do chúng tôi đã nhập nó sau Bootstrap trong phần đầu của HTML, do đó ghi đè các kiểu xung đột Phần kết luậnBài viết này cung cấp hướng dẫn chuyên sâu về các thư viện và khung CSS phổ biến. Tôi hy vọng điều này sẽ giúp bạn chọn công cụ phù hợp để sử dụng khi phát triển các ứng dụng giao diện người dùng của mình Nếu bạn có lý do khác để ưu tiên khung này hơn khung khác, vui lòng chia sẻ nó trong các nhận xét bên dưới. Hãy nói về chuyện đó Cảm ơn vì đã đọc Giao diện người dùng của bạn có ngốn CPU của người dùng không?Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket.LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi lại các yêu cầu mạng và tự động hiển thị tất cả các lỗi Tôi có nên sử dụng Tailwind CSS với material UI không?Việc sử dụng CSS Tailwind và Material UI có thể giúp quá trình phát triển trang web trở nên dễ dàng hơn , trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Tailwind CSS để tùy chỉnh kiểu của thành phần Material UI. Có thể có một số xung đột trong Tiếp theo. js, chúng ta có thể xóa quy tắc đặt lại của Tailwind CSS mà không cần sử dụng chỉ thị cơ sở @tailwind.
Có đáng để sử dụng Tailwind CSS không?Có nhiều lợi ích khi sử dụng Tailwind CSS thay vì sử dụng bộ giao diện người dùng truyền thống. Chúng ta hãy đi qua một số lợi ích quan trọng. Đầu tiên, Tailwind CSS cung cấp cho bạn kích thước tệp CSS nhỏ hơn . Tạo kiểu cho ứng dụng web của bạn bằng CSS thuần túy yêu cầu bạn viết nhiều CSS hơn khi bạn thêm nhiều tính năng và thành phần hơn vào ứng dụng web của mình.
CSS Tailwind có tốt cho các dự án lớn không?Một số nhược điểm khi sử dụng Tailwind CSS bao gồm. Phần đánh dấu của bạn có thể trông lộn xộn đối với các dự án lớn vì tất cả các kiểu đều nằm trong tệp HTML . Không dễ học nếu bạn không hiểu rõ về CSS.
Tôi có thể sử dụng MUI và Tailwind cùng nhau không?Có, bạn có thể chạy cả hai khung giao diện người dùng . |
