Why I Hated CSS Frameworks (and Why I Changed My Mind)

As a user interface (UI) developer frequently tasked with bringing beautiful, custom designs to life with HTML, CSS and JavaScript, I eschewed CSS frameworks for the longest time. In particular, I held a grudge against Twitter Bootstrap. It was too heavy, too prescribed; it would produce a site that mimicked countless others, with all too similar styles for buttons, alerts, headers … everything. It was, in my opinion, not an option at all. Neither was Zurb Foundation, or YUI or … you get the picture.

And so when I was tasked with initial HTML/CSS implementation for a mobile Web app, I didn’t use Bootstrap. I didn’t look at Foundation, or any of the more lightweight options available. After all, I’m a UI developer and know my way around CSS and HTML; I could just build my own!

The result was actually quite successful. I created a very simplified grid, since the constraints of my project dictated that we didn’t need to be fully responsive, only adapt between our minimum and maximum supported widths (320px — 480px). I added in core typography styles. I had variables and mixins in my SCSS, of course, and used them well. It was great, and I was proud of a job well done.

But this was version 1.0. The very first release. And, of course, as with all software development projects, we had plans for another release. And another after that. There were features to add, minor bugs to fix, copy to edit. This is where I started to rethink my initial approach.

At the outset, I didn’t even develop my own grid classes; I didn’t need them! A few helper classes to handle widths, and I was good to go. As long as I could extend .full-width, .half-width and .quarter-width as needed, I would be all set.

Except … now I had to implement a new page, and it would have been nice to have a class that set an element’s width to one-third its parent element’s full width. Or, gee, maybe a way to better divide up my “rows,” for lack of a better term. And my buttons — this new page needed buttons as well. Should I use .btn-fancy or .btn-simple? Come to think of it, what defines “fancy” vs. “simple,” anyway?

This is where my carefully built, homegrown SCSS began to deteriorate. It wasn’t necessarily because I wasn’t using a framework. But the fact that I had intentionally omitted any framework meant I had less of a grasp on suitable naming conventions and class organization. I had no patterns to base new styles on, and so each time I wrote things in a slightly different way. I looked at my code, and realized that for anyone besides myself, it would be extremely unintuitive, and would make updates and future enhancements incredibly difficult and slow-moving.

And so I had an epiphany: CSS frameworks are key! They are the tool you need to succeed! Obviously, this was what I should have done all along. Right?

Almost. I now believe that any project should begin with some kind of CSS framework. Heavy or lightweight, JS-included or CSS-only, every project should begin with some kind of consistent baseline. Maybe Bootstrap and Foundation are too much for your needs, and that’s okay. But there must be some starting point, and you may want to think twice about reinventing the wheel.

What’s your experience with CSS frameworks? Which ones do you use or avoid?

This article was originally published on EffectiveUI’s blog on November 14, 2014.