Hướng dẫn bootstrap vs vanilla css - bootstrap vs vanilla css

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:

type="button" class="btn btn-primary">Click Me</button>

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:

class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  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