Vanilla CSS vs Frameworks

Every website uses CSS ("Cascading Style Sheets") - but that does not mean that every website uses it in the same way.

There actually are multiple ways of adding beautiful styles to your web page. One of the most common ones is using Bootstrap, a CSS framework originally developed by Twitter.

Especially three, four years ago it was hard finding a website which would NOT use it. Time to check whether Bootstrap still is your #1 CSS weapon.

Let's compare writing "vanilla CSS" (=> our own styles without a framework) with component frameworks like Bootstrap as well as utility frameworks like Tailwind CSS.

Also watch the video above this article, I do dive into a practical demo + detailed comparison there, too.

Writing our own styles without the use of any framework is actually how you probably learned CSS.

We typically add a framework like Bootstrap to save time but it's important to note that you only have full control over the styling of your page if you write the style definitions on your own.

Writing all your styling rules from scratch means a lot of work of course. Here's how we could style a simple button:

.button {
  font: inherit;
  border: 1px solid #521751;
  background: #521751;
  color: white;
  padding: 3px 10px;
  cursor: pointer;
}

.button:active,
.button:hover {
  background: #722a71;
}

.button:focus {
  outline: none;
}

The HTML code could look like this:

<button class="button">Buy</button>

Here's the resulting button:

Nothing fancy but it still requires a couple of lines of CSS code.

If you're new to CSS, if you're a JavaScript-only developer or if you're facing a tight deadline, you might not be interested in writing all the CSS rules on your own though.

Bootstrap (and comparable frameworks like Foundation) to the rescue!

If writing your own CSS code isn't your thing, you can also get a nice looking button by turning towards a component CSS framework like Bootstrap.

Component framework simply means: A CSS framework which ships a ton of CSS classes you may add to your HTML elements to turn them into beautifully styled building blocks. I'll keep referring to Bootstrap for the rest of the article but I essentially mean "Any component framework like Bootstrap".

After adding the import

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

you just have to add the following HTML code to get a nice looking button:

<button class="btn btn-primary">Buy</button>

That's looking pretty good, right?

Only two lines of code give you a nice-looking button. And since the people who are working on Bootstrap probably know their job, you can also rely on the underlying CSS code to be written in a best-practice way.

There are downsides though.

It sure is quick and easy to add a button like this but a couple of issues come to mind:

• You don't have full control over the underlying code

• All pages which use Bootstrap tend to look the same

• You might be importing way more features than you're using, hence you might be bloating the size of your codebase

The full control argument is of course only partly true. You can still overwrite the Bootstrap CSS classes. You could define your own .btn class rule and add your own styles. But this also quickly renders the idea behind using a component-based framework useless. Additionally, you might need to overwrite a lot of classes or use dirty tricks like !important to really achieve the style you want.

Regarding the argument that all pages look the same: This really comes down to your preferences. Maybe this does not really matter to you, maybe you're just building a prototype which needs to be finished soon. It is something to keep in mind though.

What about the bloated codebase? Depending on your build setup, you can import just what you need. If you just use the CDN link shown earlier in this article, you get the full Bootstrap package though.

This is not ideal, because you'll force your users to import a lot of CSS rules which are never used. That means more code to download which of course impacts the loading speed of your page.

What's a "Utility Framework"? How does Tailwind CSS differ from a component framework like Bootstrap?

Whereas component frameworks offer you CSS classes that turn your unstyled HTML elements into much more pleasant ones, utility frameworks focus on giving you utility CSS classes only.

Here's an example using Tailwind CSS (which you can also import by just adding a CDN Link):

<div class="py-2">I'll have some padding top and bottom</div>

.py-2 is one of the many utility classes added by Tailwind. It sets some padding-top and padding-bottom to the <div> element.

With these utility classes, you can build your own styled button like this:

<button class="bg-purple hover:bg-purple-dark text-white font-bold py-2 px-4 rounded">Buy</button>

This is what you'll see:

Looks good, doesn't it?

No pre-styled button class was added, instead the finished button is just the result of the various utility classes which are used in conjunction.

Utility frameworks therefore give you more control over the end result than component frameworks like Bootstrap do. And still you don't have to write much (or in our little example: any) CSS code.

Additionally, you probably still benefit from well-written CSS code (in the framework codebase) and multiple pages using Tailwind CSS probably don't look equal. You can also easily add your own CSS classes and styles to tweak the button look.

But of course you still face the potential issue of importing a lot of CSS classes you never use. If you're using an advanced setup, you can control the file size though.

So what should you use? Vanilla CSS? Component frameworks like Bootstrap? Or take the "golden middle": Utility frameworks like Tailwind.

As always, it depends on your project requirements.

If time's a huge issue or if you're prototyping, a component framework like Bootstrap might be the best choice. You get a nice-looking result quickly.

For full control and the exact styles you want, you'll have to write the CSS code on your own though. This allows you to ensure that there's no unused code and that everything looks and works just the way you want it to.

Indeed, utility frameworks often are the golden middle but learning all the utility class names can also be challenging. They do allow you to speed up your development flow once you got the core classes down though. Utility frameworks can be a nice addition to your own code therefore.