When working on my full stack project management system, I ran into a dilemma. How will I design the web application? Do I want to write out the CSS by hand? Or do I want to utilize the frameworks that are available to me? If I did choose a framework, which would I use? I could choose a component-based library like Bootstrap or a utility-based library like Tailwind. It seemed like the CSS world was my oyster. To decide, I had to do some research to learn about the pros and cons of each choice.
Vanilla CSS
It quickly became apparent that I would want to avoid writing my own CSS from scratch. The reason? I’m very lazy and also very bad at web design. But creating your own CSS has its benefits. Writing your own CSS means you have full control over your design. What you see is what you get, literally. This means you can name your classes and ID’s whatever you’d like. Since you are the one in control, you also never have any unnecessary code in your CSS files. But full control is also a double-edged sword. Unless you are a CSS expert, your naming can drift from the industry’s naming conventions. Also, if you have an extensive web application, writing out CSS can be a time-consuming task; it might even be a full-time undertaking.
Bootstrap
My second choice was to turn to the tried and true component-based library of Bootstrap. It offers a library of components that are ready-to-use and works out of the box. There are many advantages to using Bootstrap. You can use their components to quickly and effectively build out your webpage. You also don’t need to be an expert at CSS to fully utilize their library. If you are working with a team, they will also be familiar with the naming conventions that Bootstrap uses with their components. The biggest gripe I’ve heard with Bootstrap is that seasoned developers can easily tell if you’re using its components. “All the websites look the same” is a phrase you might’ve heard associated with it. That probably has to do with the fact that Bootstrap doesn’t offer much customization with its components. Customization often leads to writing monotonous code that could be better off done with vanilla CSS. And finally, depending on how you import Bootstrap, it can leave leftover, unused code in your files.
Tailwind CSS
The third choice (and the one I ended up using) was Tailwind CSS. Tailwind is a utility-based design framework that has seemingly taken the web development world by storm. Instead of fully fleshing out components, Tailwind provides numerous utility classes for flexibility and customization. It is not an opinionated design framework, but it does provides a strong and consistent design foundation. The helper classes let you design your own containers or buttons or anything you want on the fly. Living between convention (Bootstrap) and configuration (vanilla CSS) is its biggest strength. If you are working with a front-end framework (React in my case), you can abstract all of the code into its own component. All of the source code is centralized in one place, and you can reuse that component anywhere. Tailwind’s biggest weakness is the steep learning curve. As powerful as it is, it is equally as daunting to begin learning.
Conclusion
These are just my ramblings about CSS frameworks. If you enjoy custom designs or are working on a small project, vanilla CSS is an option. If you need to build a website quickly or don’t want to engage at all with CSS, Bootstrap is for you. If you want to work somewhere in between while also having custom design patterns, look into Tailwind CSS.
