Bootstrap Baggage

Lately I’ve been working on a purely front end project to brush up on my front end skills, which I haven’t spent as much time on since the beginning of my Flatiron School program. I felt like Bootstrap was a framework that I needed to get more comfortable with, so I began with a bootstrap cover template. Because I’m practicing the execution of an image file of a design, I am trying to customize every last detail of this template to match it. For anyone who has worked with bootstrap, you can probably guess where this is going. My very practical program warned me, but I wanted to find out for myself.

Customizing bootstrap components requires a combination of detective work to find out where the css code for the relevant attribute for that component is being held prisoner, and, when in doubt, figuring out how to override that code, wherever it is. I’ve already used the “!important” tag more times than I’m proud of. Being as specific with css selectors as possible in order to control the component is something that Flatiron taught me well, but it is not that I thought I would ever need as much as I have on this project. At times this takeover has felt a little hostile.

Another aspect of Bootstrap that Flatiron warned me about, but which didn’t really click for me until this project, is just how much unnecessary code comes with a basic Bootstrap template. I saw for myself, as I was scrolling through the bootstrap.css file, that the reason bootstrap can make all these components as if by magic, is that it is like a Mary Poppins bag for code. It has everything you need, and lots of things you don’t, but you can’t see that from outside that file. This makes Bootstrap ridiculously “heavy” as far as size goes. I am seriously considering an experiment in which I delete the code from that file, selector by selector, and just see how much I can get rid of before the page breaks. The amount of new css I’ve written at this point to customize attributes, probably makes a lot of the out of the box css redundant anyway.

Leave a comment