Yep... I fell into the "Bootstrap Trap."
Well, simply put, it's not focusing enough time on learning CSS without the help of frameworks.
The past 5 years I've been dabbling in web development, but never really focused on it and put effort into learning until mid to late 2019. CSS always was the bane of my existence.
That was, until I found Bootstrap and other similar CSS libraries/frameworks. "I get a grid with this? Hell yeah! That will make CSS much easier." And, it did.
Sure, Bootstrap and company are fantastic tools and arguably make CSS easier, or do they? With CSS Flexbox and CSS Grid we now have the ease of use of Bootstrap in native CSS.
Seriously though, don't skimp on learning just plain ole CSS. I did. But now I'm fixing that. The additions (yes, I'm behind 🤷♂️) of CSS Grid and Flexbox are gamechangers to me. They are incredibly simple to work with and use.
I actually ENJOY CSS now. I never thought I would be writing those words, but I do.
It was a shortcut, at least that's how I see it now. Bootstrap sure is easy, but it's also incredibly heavy and even reliant on jQuery.
My total package size when using just plain CSS vs using something like Bootstrap is the difference between night and day; especially if you are pairing it with any JS framework/library like React or Vue.
Along with that, it taught me some bad CSS practices. I'm still working to correct these. When learning something new like CSS, our brains absorb all the new information like sponges, whether you retain that information or not. "Oh I'll just add some padding here.... some margin there... hmm... that still doesn't look right."
That might not be 100% Bootstrap's fault, but it didn't help because I skimped on the basics.
How are we supposed to build a strong "building" of knowledge without a firm, sturdy foundation? I found out the hard way that this was NOT the correct way to go about learning something that seems so daunting.
Seriously, don't skimp out on the basics. And this includes learning vanilla JS vs jumping right into frameworks/libraries. React has a steep enough learning curve as it is, why would you make it harder on yourself?
After you have plain CSS down. No, you don't have to master it (does anybody?), but learn about the commonly used tools and properties in CSS: margin, padding, z-index, Flexbox, Grid, etc. These WILL do what you want. After all, Bootstrap IS CSS, among other things.
Have I mentioned how amazing CSS Grid and Flexbox are? They make CSS so enjoyable to use. Once you get a decent understanding of them, it's so simple, too. If I could, I'd go back in time and give past-Eric and good ole slap to get him straightened out.
Don't make the same mistake I did. Learn CSS. It's difficult, and learning it sucks, but it's so worth it in the long run.
What mistakes did you make early on that you would change if you could?