The Great Migration

I've long been of the opinion that CSS Frameworks are the new <table> tag because they take all the content and the presentation and mix them up, muddying the waters and hurting maintainability.

My hope here is to explain why I was right, and why I am wrong.

Some History

Back in the old days of the web (the mid-90s) before CSS was a thing, web developers had to write all of their styles inline, the color of text, the size of the fonts, everything. And we also had to write out our layouts using tables (just like the one you use in Excel), and by merging cells either horizontally or vertically we got some pretty neat stuff done. Like this amazing work by the web developers at the World Wrestling Federation, on the left is what you saw in your browser, on the right is the crazy table that made it up.

But There Were Downsides As I said at the beginning this mixes presentation, or styling with the page's content. This was bad because hopefully visitors to a given site would traverse multiple pages and we didn't want them being forced to download all that presentation information again, because that's just silly. This also meant it would take much longer to change these sites as we would be forced to go in and change all of those table cells, making every page look the same was tedious and difficult, and accessibility for users with disabilities was affected.

In Comes CSS

Then CSS came along and enabled us to define our styles once, and see them on every page. It was a glorious time. But before long web designers started to miss the dependability of our table-based layouts and started to make grid layouts in CSS that required presentational classes like "column-5-of-12". And after a while these CSS grid layouts became full-fledged prototype-to-production CSS frameworks, like Bootstrap or Foundation.

Presentational Classes

Presentational Classes are hotly debated, as a quick Google Search will tell you. And this is because they appear to be little more than the CSS version of tables. Okay, that's not really fair. CSS doesn't need to be re-downloaded for every page or affect accessibility. But it does mix style and substance as well as requiring serious re-working of the HTML to alter the appearance in the case of a re-design or even large-scale design tweaks. When you consider the power of CSS to dramatically alter the look and layout of a page this was not a great trade-off for some. Besides, Frameworks had a ba-zillon things in them that many people who took advantage of those frameworks didn't even use. It was just extra code downloaded to the browser. Just because.

The Middle Way

Then creative developers who wanted both sides to be equally happy (or equally unhappy, if you're a pessimist) started using CSS Preprocessors to create a system where we could use CSS Grids and frameworks without being forced to clutter up our pages with presentational classes.

A Better Foundation

So, although I still believe CSS Frameworks can be used for evil, with the right framework and healthy respect for (or fear of) presentational classes, these Frameworks can be used for good. And with the release of Foundation 6, Zurb has overhauled their code base and reduced their CSS by 50% and made it obscenely easy to remove components we neither want nor need in each project's CSS. This is why we are excited to be adopting Zurb's Foundation Framework as our new prototype-to-production workhorse. This will help us to standardize on a single framework, which will speed up development times, enable us to focus more on the little touches, sweat the details more, and -- perhaps most importantly -- update our underlying CMS and infrastructure to better serve our customers and position us to keep improving for the future.