I doubted people who advised me to use a CSS framework. Now, I think it is a must.

Doubt

I was always the guy who wrote every single CSS on a site by hand. Even this blog site is fully made by 100% custom CSS. The only thing I used (and currently use at every project) was the Sass preprocessor. If someone told me to stop this habit, I immediately disagreed. Why?

In school the base kit of learning web development came with Bootstap. Bootstrap is a popular CSS framework which provides a collection of pre-built components, utilities, and a responsive grid system. The goal of it was to make components quickly with HTML by using CSS classes. It was used in all exercises. I developed the mindset that using a CSS framework causes more bad than good. We didn’t customize Bootstrap how it should have been, we had to row our boats against the water’s flow direction. We had to somehow overcome the default styles that Bootstrap created. As a beginner in CSS that wasn’t easy. Everyone had a headache when there was something that needed customization.

Back then, I came to the conclusion that using a CSS framework is just a setback. It isn’t worth it to work more time to edit something than just building that component from ground up.

Discovery

I was really slow when I developed this blog site. I knew the solution to speed up the development would be a CSS framework. I recently used one. There are all kinds of frameworks, but I decided to go with Tailwind. It is a utility based framework, so there weren’t any problems like in the past with Bootstrap.

Faster Development Time

When doing everything with pure CSS you are slow. First, you repeat yourself a lot by writing out display: flex for the 6th time. Second, you lose your mind in the huge piles of code. I can’t even count how many times I have spent longer periods to find the CSS selector that modifies a specific element. With Tailwind, all I had to do was apply classes here and there, and I was done. It takes care of repetition and I don’t have to search for selectors.

Smaller File Sizes

Tailwind is really performance focused. On bigger websites, using Tailwind can reduce the CSS file size. It again, comes down to stopping the repetitive properties with pre-written classes.

Units

Global units are required for a good-looking website. When using the built by hand CSS approach, you tend to lose control over your units over time (based on personal experience). Under units I mean: font sizes, gap sizes, colors, animation times. By using pre-written classes, units are not a thing to worry about. Of course, you could make your own unit variables with SCSS, but then new questions come to my mind. What sizing unit should I use? How many colors should I define?

Level Up

Using Tailwind is a great step for towards productivity, but more things could be done. Tailwind is utility based, but a component based framework can save even more time. In the future I might try one, but first I will enjoy the power of pure Tailwind.