On CSS Frameworks

This is not to down play the amount of time spent building a CSS Framework. We have such a huge amount of respect for people doing side projects like this, we just enjoy speaking about what works for us.

This post is an on-going conversation, check back for updates.

Tom S

For me it comes down the amount of it I actually use. If I have extra lines of unused CSS I rip them out as soon as I can, so I can't justify an extra 10-15 object styles weighing down my site if they are not being used. I always find myself resorting to the lightest grid I can find just because I am woeful at maths. Having said that, for somebody who wants to promote a technically great product, quickly, they have many benefits.

Jamie W

There’s an oft-quoted Phil Karlton saying: “There are only two hard things in Computer Science: cache invalidation and naming things”. The latter is doubly true for CSS. Other people will have to work with and understand our stylesheets, often without having been around for the initial decisions that went into them. Obscure or, worse, ambiguous class names will cause pain later down the line. Popular CSS frameworks like Bootstrap and Foundation have something to offer in this regard: conventions on naming.

Borrowing naming conventions from a popular project, even if we don’t actually use the project’s code, will give other developers an immediate clue as to the purpose of a class or mixin. Granted, Bootstrap and Foundation don’t actually agree on naming, but the odds that another developer is familiar with at least one of them are better then them guessing what our naming conventions mean.

Furthermore, there are some things which will just never have very good names. At some point, someone just has to pick the best of a bad bunch and run with it. Foundation’s panel is not particularly meaningful, but if you’ve used Foundation at all, you get its purpose.

So what am I saying? Read through the docs of Bootstrap and Foundation and borrow the bits that make most sense? That sounds quick and easy, right? Sadly, it’s not enough. We’ve got to really use these projects in anger, discover how they work and the design choices that have made them so popular. I’d go as far as to advocate making time to try out as many popular projects as you possibly can, to learn from them.

Foundation & Bootstrap alongside projects from other domains such as Wordpress, jQuery, Rails, Node, Ember, Angular, Meteor… it’s important to try them all with an open mind and understand why so many people are talking about them.

Which is not to say we can’t also be critical. Being critical is really fun and hopefully keeps everyone on their toes.

Tom M

CSS isn't particularly complex. A button class or mixin should be a few lines of code and would probably take a minute or two to write. A grid system is slightly more complicated, but there is a good reason for that. A grid system of uniform columns and gutters isn't so bad, but I find that even designs with a strict grid will have edge cases where the rules need to be flexed. Then there are sites that have multiple complex grids, either across different layouts, or across the same layout but with non-uniform or asymmetric columns. Foundation and Bootstrap grids are too rigid and simplistic to accommodate this. Having to implement a custom grid system on top of the one included feels redundant and messy. I'd prefer to just use custom SASS grid mixins/functions for the entire site.

Fluid layouts and relative em-based sizing are not unique to frameworks, but I believe they are poor choices for defaults. Our responsive designs very rarely match the behaviour of Foundation or Bootstrap.

Foundation and Bootstrap both have a bunch of widgets and javascript components. We'd generally only use a handful of those components at a time, and they aren't necessarily the best out there or do exactly what I want them to do. So we'd either build our own, use a third party, or spend the time fiddling with the standard ones.

I'm not too concerned about the amount of gumpf in the frameworks themselves, but they force so much extra CSS into my own stylesheets to explicitly cancel out everything I don't want. They make my own work look messy and difficult to read, with convoluted overrides for things that should never have been defaults (e.g. box shadows). Between vanilla CSS, SASS and Bourbon, writing custom designs is simple, flexible and really quite enjoyable. I'd like to use a formalised or de-facto file structure and naming format, but I don't want the actual CSS from any of these frameworks.

Stubborn, deeply nested, default styles are painful and make working with CSS joyless. Basically I'd prefer to spend my time building stuff from scratch, than trying to jam stuff in where it doesn't belong.