You Don't Need Bootstrap
I generally try to avoid using CSS frameworks like Bootstrap or Foundation in my projects. I like the idea of using a framework but I find that in practice they're more trouble than they're worth.
Sometimes you don't have a choice. If your team likes Bootstrap and is heavily invested in its use thats fine. I'm not saying you should start drama on your team. But consider building your personal projects without a framework.
Performance
By default most CSS frameworks include the kitchen sink. You will include a lot of styles that will go unused or be overridden. Yes sometimes you can pick and choose which pieces to add but this is just extra work.
The majority of Bootstrap sites I've worked on only used the grid and the navbar. Bootstrap comes with a ton of other styles. There are styles for forms, accordions, modals, on and on. You are downloading a ton of extra styles into your project. CSS can get bloated easily and you don't want to add a ton of unused code.
Less Complexity
When I tried to use Bootstrap in my projects I found myself overriding a lot of the styles. This leads to more complexing and makes your CSS harder to reason about.
The cascade can lead to some difficult to diagnose errors. Throwing a framework on top of your custom styles will make things even more complex. Especially when default framework styles peek through. You don't want to waste time trying to figure out where a font came from. And you don't want to litter up your CSS with !important.
More Flexibility
Sometimes with CSS frameworks all sites end up looking the same. They come with a lot of limitations.
I worked at a company that used Bootstrap for the majority of their projects and it usually led to trouble. The sites were not designed with Bootstrap in mind and it led to a lot of extra work and resentment. And yes this could have been resolved by forcing the designers to design for Bootstrap. But why should they be restricted?
Most of these issues revolved around the Bootstrap grid and the responsive navigation. Now this was in the dark days before CSS Grid and Flexbox were viable options. Flexbox didn't have enough browser support and CSS Grid wasn't even a thing.
If a design called for a 5 column grid or a custom mobile navigation it usually led to tension between teams. The developers didn't want to deviate from the Bootstrap grid and the designers didn't want to change their layouts.
There was talk of "designing for Bootstrap" but it never gained traction. And sometimes you really do need a 5 column grid. And really, its just 5 divs that take up 20% of its container. Not that hard to build yourself.
Learning CSS and Practice
Using CSS frameworks can improve your productivity but it comes at a cost. When you rely heavily on frameworks for all of your projects you are not learning how to write CSS your are learning a framework. Well what if you're in a situation where you cannot use a framework?
And yes not everyone wants to or needs to learn CSS. But if you have been avoiding CSS like the plague I would encourage you to give it a try. Its really really fun and powerful once you get the hang of it.
Some Notable Exceptions
Web development is all about tradeoffs. As a developer you should never be too dogmatic. Each situation is different and yes, sometimes using one of the popular CSS frameworks is the best decision.
Prototyping
If you just need a quick proof of concept a CSS framework can be a great tool. You can have a good looking application without taking the time to write CSS.
You need to build quickly and don't have time to learn CSS
I am certainly not advocating spending months mastering CSS before starting on a time sensitive project. If you have a deadline and Bootstrap will help you get things done on time use it.
You're taking over a project that was built using a framework
Don't replace your CSS framework. This will most likely be more trouble than its worth.
But consider phasing it out in future additions and refactors.
Your company decided on a framework for you.
If your company has decided that all projects should use Bootstrap its probably best if you don't fight it. Especially if you're new and just trying to get established. Most likely there is a good reason behind this decision.
If you notice that Bootstrap is leading to some of the issues mentioned above you can always discuss these issues with your team lead or your manager. Suggest that your team could try building a small pilot project without a framework.
What to Do Instead
Build Your Own Framework
Building all your CSS from scratch is usually more performant and leads to more flexible, maintainable projects. However you do reach a point where you're sick and tired of writing code for common design patterns. Bootstrap does save a lot of time if you work within its constraints. And writing the styles for a form for the hundredth time can drive someone to tears. So reusable styles do really come in handy.
You can reuse your CSS very easily by creating your own framework (More about this in a future article.). Include styles that you find yourself using over and over.
- Create utility classes
- Break it up
- Leave room for flexibility
- Use Scss mixins
Use Utility Classes
Create your own list of utility classes and use them to style components without having to constantly write new CSS.
This strategy works best for me when I'm building out components. Especially in Vue and React apps. This way you don't have a lot of duplicate classes.
I advise against using this method if you're working with a CMS like WordPress. You don't want to require content editors to memorize a bunch of CSS or spend extra time creating shortcodes and menus.
Get Really Good at CSS
I know this may sound like strange advice. Of course front-end developers should be good at CSS. But I've found that the more CSS I write the more I don't even think about using a framework. In reality the framework will slow me down.
After you really learn CSS you won't need to look up rules. You'll build muscle memory. And you will find that you don't even want to reach for a framework. It will also be easier to debug problems when they do arise because you'll have a solid understanding CSS.
Also many of the problems that CSS frameworks traditionally solve (grids) have native solutions. Between FlexBox and CSS Grid who needs a framework?