Why I love using vanilla CSS

10 June, 2021 • 3 min read

When I started creating my blog, around December 2019, I came across various dilemmas regarding what tech stack to choose.

I remember spending a few days just for research having in mind that it was an opportunity to experiment with new tools and have fun during the whole process.

When it came to the styling part, I decided to go with vanilla CSS and, I am about to write how it started and how it goes.

Why vanilla CSS ?

Well, when you think of it at first, it definitely doesn't look like a new tool. But CSS variables were new to me, so I wanted to experiment with them.

Having prior experience mostly with various CSS pre-processors like SASS and LESS, I wanted to return back to basics for such a simple use case like a blog.

My needs were trivial, mostly some margins, some paddings and basic styling in general. Light and dark theme implementation was on the list as well.

I thought it was a good idea. And indeed, it was in the end.

The benefits of using vanilla CSS

First of all, I love CSS variables. I think it's great fun to use them.

In addition, I like the fact that I am dealing with the industry's standard way of styling web pages instead of building things on top of third-party tools like CSS pre-processors - which are great by the way.

Also, I am flexible and can choose whether to develop my application using CSS-in-JS or following the old-school way and go with .css files.

Last but not least, it performs better in terms of application build times since there are no loaders in the middle to handle and compile special files like .scss.

The trade-offs

Sometimes, writing a complex selector or applying styling on pseudo-classes can be way more verbose using vanilla CSS compared to other pre-processors, but that's a cost I am willing to pay.

In terms of browser support, all browsers support vanilla CSS. But when it comes to CSS variables there are some exceptions.

At the time of writing this post, over 95% of all users permit the usage of the var() syntax in stylesheet declarations. Which I think is a pretty good percentage, given that Internet Explorer support will stop either way around June of 2022.

A simple use-case with CSS variables (Bonus)

Here is a quick example of how to implement a naive theme toggler using vanilla HTML, JavaScript and CSS variables.

The HTML part:

<body>
  <main>
    <h1>Hello World!</h1>
    <button onclick="handleToggleTheme()">
      Toggle theme
    </button>
  </main>
</body>

The JavaScript part:

function handleToggleTheme() {
  document.body.classList.toggle("dark");
}

The CSS part:

/* default context vars */
body {
  --color: black;
  --background-color: lightgrey;
}

/* dark theme context vars */
body.dark {
  --color: lightgrey;
  --background-color: black;
}

/* selector with styles using vars */
main {
  color: var(--color);
  background-color: var(--background-color);
  transition: background-color 0.2s ease-in-out;
}

Finale

At the end of the day, all that matters is to enjoy working with the tech stack we have chosen.

More or less, all tools provide the same output and have their trade-offs.

Personally, I enjoy working with vanilla CSS and that's the tool I will be using in my future projects from now on.

Thanks for reading!