Hướng dẫn vanilla css vs bootstrap

Hello everyone! Today's article is something I've always wanted to discuss. I remembered when I first learned CSS and hearing about Bootstrap and other frameworks like Materialize. At that time, I was unsure if I should learn these frameworks but I ended up with Bootstrap for a team project and it stuck around. And now Tailwind CSS seems to be rising in popularity, which makes me ponder if I should learn once again.

In this article, we will be looking at Vanilla CSS, Bootstrap and Tailwind CSS; analyzing their pros and cons and determining which one is best to learn in 2020. So let's begin!

CSS

My experience with CSS is that it is easy to pick up but hard to master. I do like CSS because I like to create 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.

However, writing CSS from scratch can be 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

When I first discovered Bootstrap, I really love how 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>

It's 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.

The downside is that it is so popular that many websites use it; so unless you override some styles with custom ones, your website will look very similar to other websites. Like a copy-paste.

Another con is that using Bootstrap means that we are importing large chunks of CSS code, whether we use it or not. For example, if our website don't have card or dropdown elements on it, we will still import the styles of unused elements when using Bootstrap. That can 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.

Note: jQuery is no longer needed for Bootstrap 5.

Tailwind CSS

Unlike Bootstrap which is component-based, this framework is 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

Because of the way it works, websites made using Tailwind does not look as generic as those made with Bootstrap. It is more 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.

Verdict: Which to use/learn?

While using vanilla CSS gives you full control and customization in terms of style, it is definitely not the winner here 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.

But 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 is a good choice for making generic but high quality looking websites fast. You want a navbar? Pop in