In an ideal world, web developers would never use CSS frameworks. There would be ample time, patience, and money for building everything from scratch to suit every single site to a tee. All load times would be instantaneous, and all browsers would be compatible with whatever a web dev chose to do.
Breaking news: we don’t live in an ideal world.
Each client wants its site or site modifications finished yesterday, to perfection, and for free—not necessarily in that order, but you get the point. Site-load time, including the infamous Time to First Byte (TTFB), is critical. And, while browsers have advanced a lot in the last three or four years, not everybody is using the latest and greatest and, besides, there are still some CSS shortcomings among even recent browser versions.
Note: I, uh, kinda re-thought this a few days later, but go ahead and read this one first so you’ll have some perspective on that post.
Frickin’ frameworks?
While what I’ve just pointed out would seem to be not just common sense but “duh”-level common sense, I’ve read a lot of web-based articles and comments that go all “No true Scotsman” on the notion of a web dev’s using a framework. This is especially true for those who are touting the seeming superiority of the CSS Grid Layout Module (usually just called CSS Grid) over the best-known framework out there, Bootstrap:
- “. . . I get that I could have just used Bootstrap and called it a day . . . but . . . I wanted to be excited about layout on the web again . . .”
- “For the first time ever we have a proper layout system available natively in the browser, which gives us a ton of benefits. [Compared to Bootstrap] . . . not only can you create layouts that previously wasn’t [sic] possible without introducing JavaScript, but your code will be easier to maintain and understand.”
- “Why did I stop using Bootstrap? Bootstrap is too verbose . . . Things get even worse when you add responsiveness . . . or when you want to move your blocks around. Bootstrap’s grids are limited to 12 columns. By default, Bootstrap has 10-pixel paddings that are complex to override. Bootstrap has to be downloaded by the users, which slows down your website.”
Interestingly enough, that last article I excerpted soon starts telling you what else you have to add in your CSS to achieve what a framework would do anyway. So, let’s start my rebuttal there.
The case for Bootstrap
- It lets you do more, and do it more quickly — Sometimes you need to create buttons, or cards, or alerts, or responsive nav bars, or a dozen other things. And create them quickly. A minimal amount of code does those in Bootstrap 4. CSS Grid doesn’t include and, to be fair, isn’t intended for doing any of those things out of the box; but they’re all built into Bootstrap 4, and they’re easy to modify if you don’t like the Bootstrap defaults.
- It’s more compatible — As much as we who do web schtuff might wish otherwise, not everyone either does, or even has the option to, use the latest and greatest. There are literally thousands, if not millions, of corporate users whose IT departments limit their web browsing to the hated but still extant Internet Explorer, usually because of the presence of in-house applications which require it. CSS Grid doesn’t do diddly for those folks. But Bootstrap 4 does, especially if you use HTML5 Shiv for those poor ba — uh, people — who are forced (or, in certain countries, choosing) to use something as ancient as Internet Explorer 9 or earlier. As with my observations last month about the need to accept a lowest-common-denominator approach to B2B email, I think a real-world approach to web dev still requires coding for more than just the aforementioned latest and greatest.
- It’s not as limited as you’ve heard — I’ll give you just one example. One of the biggest whines you’ll hear about Bootstrap 4 from the CSS Grid aficionados is that “everything is limited to a twelve-column grid!” Oh, the humanity. Well, thanks to the inclusion of Flexbox in Bootstrap 4, that whine is baloney, balderdash, and horse hockey. It just takes a little tinkering, which is fine. Hey, CSS Grid requires plenty of tinkering, too. If I have to tinker anyway, I’d rather start with a solid foundation under me.
- It’s available via CDN — Those who complain that browsers have to download Bootstrap 4 aren’t wrong, but the smartest way to handle that is through its CDN offering. In fact, it’s quite possible that Bootstrap’s CSS and JavaScript code will load via its CDN more quickly than would all the CSS and JS that a non-framework-based site needs to match an otherwise identical Bootstrap-based site! (And, yes, it’s true that CSS Grid itself is built into the browsers that support it, thus requiring no download. But, as I mentioned above, the “that support it” part doesn’t include enough browsers and browser versions for real-world dev.)
Maybe in the future, but for now . . .
Of course, Bootstrap 4 isn’t the only game in town when it comes to CSS frameworks. It’s just got the most of what I want with the least pain and time involved — for now.
Mind you, I remain open to new possibilities. Remember, I’d never even done an SSG site until two months before I wrote this. Newer and truly better ways of doing things fascinate me; they absolutely don’t scare me away.
Indeed, the day before I started writing this, I spent a few hours learning about and playing with the very interesting and, I think, promising Bulma, in case I wanted to convert this site to it from Bootstrap. While I was able to reproduce the vast majority of the current site in Bulma, I ran into just enough things that the relatively new Bulma didn’t do, or didn’t do as well in my opinion, that I decided to stick with Old Faithful. Six months from now, Bulma, or some other framework, might well Get There. We’ll see.
As for CSS Grid, it’s undeniably cool. As time and events allow, I will learn about it even while I continue to use Bootstrap; perhaps a future version of Bootstrap even will include it (albeit with whatever modifications, perhaps even kludges, it would take to make CSS Grid somehow work with older browser versions), just as Bootstrap 4 already includes Flexbox.
In the meantime, in our non-ideal world: when the decision is totally up to me, I’m Bootstrappin’.
Note: Many thanks to Carol Skelly for “Bootstrap (Flexbox) is still better than CSS Grid for creating layouts,” and Maria Antonietta Perna for “The CSS Grid layout vs. CSS frameworks debate.”
Latest commit (08cb79e2) for page file:
2023-04-17 at 6:18:22 PM CDT.
Page history