Bootstrap and Foundation are tools that get a new development project off the ground fast. I appreciate the need to work fast; I really do. But fast doesn’t end when you’re done wireframing a site’s macro layout. Fast is absolutely essential for every end user who uses your site after launch. And chances are, if you’re gaining speed by framing your sites with Bootstrap or Foundation, you’re cheating your users out of speed in real life. Performance is just one of several problems with HTML class-based layout. Let’s walk through the big issues here:
Separation of Powers
Programming languages have strengths and weaknesses; some even have specific purposes. This is especially true with HTML & CSS. HTML serves to outline your content. Properly formatted HTML tells search engines & accessibility tools how your pages are structured and what content is most important. CSS, on the other hand, provides design / layout / style for that content. No one tries to write content in CSS (cough, cough, don’t abuse
content: 'My Content'; either!). So why are we so set on using HTML classes to control visual layout. That’s exactly what Bootstrap, Foundation, etc, do: they require you to use a very specific HTML class naming convention in order to render your site’s layout correctly. Yes, ultimately the margins and widths and floats are in CSS, but without HTML classes, these grid systems are worthless. To be honest, if we’re going to have to use a strict system of class names on an overly-complex HTML structure (real code from a project I recently inherited:
class="small-12 medium-10 medium-centered xlarge-8 columns intro"), we might as well go back to table-based design and inline styles! (Because inline CSS is basically what all this
class="button button-blue button-large button-border" nonsense amounts to.) When CSS replaced table-based design, the promise we developers believed was “Just change one stylesheet and your entire site layout can change!” (CSS Zen Garden, anyone?) Today class-based grid systems are trying to convince us to give that beauty up. Let’s all say it together, “HTML is markup language for structuring my page content; CSS is visual styling to determine how it looks. I will not confuse them with each other.”
Back to the CSS Zen Garden ideal, I realize not every site redesign will be so drastic. But what if a “minor redesign” changes your sidebar from 33% to 25% of the width? I’m not interested in running find-replace on all my template files to change “fourcol” to “threecol” and “eightcol” to “ninecol,” all the while hoping it doesn’t unintentionally break something else! I want to go one place in my stylesheet, change those proportions, and smile. I’ve not done a huge survey or gathered data from hundreds of other devs, but in my own experience, it takes me about as much time to build a new site layout from scratch as it does to “minor layout changes” to a Bootstrap-based site. (One of these days I’ll demo Bourbon Neat here and show you how fast my method is!) If you’re going to be doing long-term maintenance of a site or handing it off to another developer, think twice about the start-up speed boost that Bootstrap or Foundation give you and choose a solution that will be maintainable long-term.
Performance & Bloat
Bootstrap and Foundation provide every grid layout style declaration possible on a 12-column system. However, I’ve never built a site that used every layout option possible. That means that 60% or so of the grid portion of those stylesheets is bloat. (I will give Foundation credit: they’ve got a config page for downloading only the components you want, but that still doesn’t fix the grid bloat.) I’ve heard the answer to this argument: “It’s 2014: 1000 lines of CSS isn’t much more than 100 lines.” (Literally, I heard that this morning.) I’d reply, “It’s 2014, major search engines are prioritizing SERPs by page speed and mobile data-network traffic is constantly growing.” Choosing to ignore easy performance gains for “speed in development” simply isn’t a legitimate option.
I’ll concede a few points about using a framework like Bootstrap or Foundation: if you’re at an agency that requires a framework or passing work off to devs who use a framework, that’s a decent reason to use one. If you have a super-cheap client who needs a quick one-off site with no maintenance, that’s a reason, but not a good one. So, if you absolutely must use Bootstrap, Foundation, etc, here’s how:
Clean Up Your Framework Output
If you’re only using 4, 6, 8, and 12 columns widths on your grid, delete the other rulesets. If you’re only using orange and blue buttons, delete the other rulesets. If you’re only using a dozen glyphs in the icon font, … you get the picture. If you’ve got a Node.js-, Grunt-, or Gulp-based workflow, Uncss will help automate this clean-up process. So stop (ab)using Bootstrap and Foundation. If possible, replace them with gridless HTML and all-CSS layout. If you must use them, clean out their bloat before you launch the site.