Chào mọi người! Bài viết hôm nay là điều tôi luôn muốn thảo luận. Tôi nhớ khi lần đầu tiên tôi biết CSS và nghe về Bootstrap và các khung khác như Metericize. Vào thời điểm đó, tôi không chắc liệu tôi có nên học các khung này không nhưng tôi đã kết thúc với Bootstrap cho một dự án nhóm và nó bị mắc kẹt xung quanh. Và bây giờ CSS Tailwind dường như đang nổi tiếng, điều này khiến tôi suy ngẫm nếu tôi nên học một lần nữa.
Trong bài viết này, chúng tôi sẽ xem xét Vanilla CSS, Bootstrap và Tailwind CSS; Phân tích ưu và nhược điểm của họ và xác định cái nào là tốt nhất để học vào năm 2020. Vì vậy, hãy bắt đầu!
CSS
Kinh nghiệm của tôi với CSS là thật dễ dàng để nhận nhưng khó để thành thạo. Tôi thích CSS vì tôi thích tạo các kiểu tùy chỉnh cảm thấy giống như của riêng tôi. Ngoài ra, nó giảm thiểu mã vì bạn chỉ viết các kiểu mà trang web của bạn cần. Tải các khối CSS lớn có thể làm chậm thời gian tải trang để viết vani CSS, bạn giảm mã không cần thiết và tăng tốc độ của trang của bạn.custom styles that feels like my own. Also, it minimizes code as you are only writing styles that your site needs. Loading large chunks of CSS can slow down page loading time so by writing vanilla CSS, you reduce unnecessary code and boost your page's speed.
Tuy nhiên, viết CSS từ đầu có thể gây khó khăn và tẻ nhạt cho nhiều nhà phát triển. Điều này đặc biệt đúng khi sản phẩm bạn làm không cần thiết kế tùy chỉnh mà chỉ là một cái nhìn cơ bản, đơn giản. Trong trường hợp này, có thể tốt hơn là chỉ sử dụng một khung, như bootstrap, vì vậy hãy xem xét những gì nó cung cấp.daunting and tedious for many developers. This is especially true when the product you're making does not need custom designs but just a basic, simple look. In this case, it may be better to just use a framework, like Bootstrap, so let's take a look what it has to offer.
Bootstrap
Khi tôi lần đầu tiên phát hiện ra Bootstrap, tôi thực sự thích cách tôi có thể làm cho các mẫu trang web với nó nhanh như thế nào. Một nút màu xanh đơn giản có thể được viết là:fast I can make website templates with it. A simple blue button can be written as:
Click Me
Thật dễ dàng để học, nhanh chóng để thực hiện và có một thư viện các yếu tố được thiết kế tốt để sử dụng. Nó cũng nhất quán trên bất kỳ thiết bị hoặc trình duyệt nào, điều đó có nghĩa là trang web sẽ vẫn đẹp về mặt thiết bị chéo hoặc trình duyệt chéo.easy to learn, fast to implement and have a well-designed library of elements to use. It is also consistent across any devices or browsers, which means the website will remain looking good in terms of cross-device or cross-browser.
Nhược điểm là nó phổ biến đến mức nhiều trang web sử dụng nó; Vì vậy, trừ khi bạn ghi đè một số kiểu với các kiểu tùy chỉnh, trang web của bạn sẽ trông rất giống với các trang web khác. Giống như một bản sao-dán.look very similar to other websites. Like a copy-paste.
Một con khác là sử dụng bootstrap có nghĩa là chúng tôi đang nhập mã CSS lớn, cho dù chúng tôi có sử dụng nó hay không. Ví dụ: nếu trang web của chúng tôi không có các yếu tố card hoặc dropdown trên đó, chúng tôi vẫn sẽ nhập các kiểu của các yếu tố không sử dụng khi sử dụng bootstrap. Điều đó có thể tác động đến hiệu suất trang, ngay cả với phiên bản SLIM, bởi vì chúng tôi đang nhập rất nhiều mã không cần thiết. Tất cả nhiều hơn nếu chúng ta đang sử dụng bootstrap với jQuery.impact page performance, even with the slim version, because we are importing a lot of unnecessary code. All the more if we are using Bootstrap with jQuery.
Lưu ý: JQuery không còn cần thiết cho Bootstrap 5.
Tailwind CSS
Không giống như Bootstrap dựa trên thành phần, khung này dựa trên tiện ích. Điều này có nghĩa là nó là một khung cấp thấp, nó không có thư viện các yếu tố được thiết kế sẵn như thẻ, nút hoặc thả xuống, v.v. . Nút màu xanh giống như chúng tôi đã tạo bằng cách sử dụng Bootstrap có thể được viết như:utility-based. This means that it is a low-level framework, it does not have a library of pre-designed elements like cards, buttons or dropdowns, etc. Instead, it has pre-written classes like margins, paddings, font-size and so on. The same blue button we made using Bootstrap can be written as:
Click Me
Do cách thức hoạt động của nó, các trang web được thực hiện bằng Tailwind trông không chung chung như các trang web được tạo ra bằng bootstrap. Nó linh hoạt hơn, có thể tùy chỉnh và nhẹ so với bootstrap. Tuy nhiên, như bạn có thể thấy, để tạo cùng một nút màu xanh, bạn cần viết thêm một chút mã cho Tailwind so với Bootstrap. Và tất nhiên, đối với bất kỳ khung nào, bạn không có quyền kiểm soát hoàn toàn trong kiểu dáng trừ khi bạn ghi đè chúng để điều này áp dụng cho CSS Tailwind.versatile, customizable and lightweight compared to Bootstrap. However, as you can see, in order to make the same blue button, you need to write a little more code for Tailwind compared to Bootstrap. And of course, for any framework, you don't have complete control in the styling unless you override them so this applies to Tailwind CSS too.
Phán quyết: Sử dụng/học nào?
Mặc dù sử dụng vani CSS cung cấp cho bạn toàn quyền kiểm soát và tùy biến theo phong cách, nhưng nó chắc chắn không phải là người chiến thắng ở đây về việc sử dụng nó vì nó chỉ là quá nhiều mã hóa, đặc biệt nếu bạn đang cố gắng xây dựng một nguyên mẫu trang web một cách hiệu quả. Đó là lý do tại sao ở nơi làm việc, bạn sẽ không bao giờ sử dụng vani CSS để phát triển các trang web. Có lẽ bạn sẽ sử dụng một số khung.in terms of using it because it is just too much coding, especially if you are trying to efficiently build a website prototype. That's why in workplaces, you'll almost never use vanilla CSS to develop websites. You'll probably use some framework.
Nhưng về mặt học tập, CSS là điều bắt buộc bởi vì nếu bạn đang sử dụng các khung khác như Bootstrap hoặc Tailwind, bạn có thể muốn ghi đè một số thành phần hoặc lớp học của họ với CSS của riêng bạn. Có nền tảng đó giúp bạn tìm hiểu các khung này nhanh hơn và cung cấp cho bạn một chút kiểm soát hơn về kiểu dáng.in terms of learning, CSS is a must because if you are using other frameworks like Bootstrap or Tailwind, you might want to override some of their components or classes with your own CSS. Having that foundation that help you learn these frameworks faster and give you a little more control in styling too.
Bootstrap là một lựa chọn tốt để làm cho các trang web chung chung nhưng chất lượng cao nhanh chóng. Bạn muốn một chiếc Navbar? Pop in ... Bạn muốn một băng chuyền trông đẹp? Không vấn đề gì. Tất cả đều được tạo kiểu trước và ở đó. Bạn giảm thiểu mã hóa và hoàn thành trang web của bạn rất dễ dàng. Hơn nữa, Bootstrap 5 mới đã tạo ra những lợi ích mới đáng kể cho khung như loại bỏ jQuery như một sự phụ thuộc và bao gồm các thuộc tính tùy chỉnh CSS. Họ cũng đang triển khai API tiện ích là khung dựa trên tiện ích của riêng họ như Tailwind.
Tailwind cung cấp những điều tốt nhất của cả hai thế giới từ Bootstrap và Vanilla CSS. Một trang web có thể trông giống như nó được xây dựng với vani CSS với tất cả các yếu tố tùy chỉnh và độc đáo của nó trên đó. Tuy nhiên, đồng thời, nó vẫn giữ được khả năng đáp ứng và sang trọng giống như Bootstrap có. Tất nhiên, vì nó đòi hỏi một chút mã hóa hơn một chút so với bootstrap, vì các thành phần không được tạo kiểu trước. Không phải là nhanh chóng để hoàn thành một trang web như bootstrap vì vậy nó thực sự phụ thuộc vào những gì nhóm hoặc khách hàng của bạn muốn: phong cách tùy chỉnh so với tốc độ.
Vì vậy, đối với bản án của tôi, nó phụ thuộc [tôi biết, câu trả lời nhàm chán].it depends [I know, boring answer].
Tailwind đã thay đổi hoàn toàn trò chơi trong phát triển CSS nhanh chóng và có thể tùy chỉnh. Nhưng đồng thời, Bootstrap 5 cũng đang đạt được tiến bộ rất lớn. Tôi đã sử dụng rất nhiều bootstrap trong quá khứ, vì vậy tôi cảm thấy thoải mái hơn với các khung dựa trên thành phần tại thời điểm này. Tôi cũng đã thử Tailwind và thật đơn giản để bắt đầu và học hỏi, nhưng tôi vẫn phải đề cập đến các tài liệu thường xuyên vì cần có thời gian để học một cái gì đó mới.
Vì vậy, tùy thuộc vào khách hàng của tôi và thời gian tôi phải hoàn thành một dự án, tôi nói rằng tôi sẽ sử dụng bootstrap để phát triển nhanh chóng và một cái nhìn sạch sẽ, nhưng tôi sẽ sử dụng Tailwind cho các dự án có giao diện tùy chỉnh và độc đáo hơn. Cuối cùng nhưng không kém phần quan trọng, tìm hiểu một chút CSS [bạn không cần phải làm chủ] để có thể hiểu một số khái niệm thiết yếu để sử dụng các khung này như margin, padding, flex, v.v.
Tất nhiên, cũng có rất nhiều khuôn khổ khác ngoài 2 trong bài viết này. Bạn sẽ chọn cái nào [không phải ở trong những người được đề cập ở đây] và tại sao? Hãy chia sẻ ý kiến của mình trong ô bình luận ở bên dưới. Cảm ơn bạn đã đọc, chúc mừng!
Credits:
- GIF từ Giphy.com