Why I Hated CSS Frameworks
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?
About the Author
Alexandra Atzl is a UI developer at EffectiveUI, where she applies her expertise in front-end technologies, including HTML5, CSS3, SCSS and AngularJS, for clients such as NextGear Capital, PepsiCo, and American Express.
An experienced Web developer with a love of clean, functional, reusable code and elegant design, Alexandra enjoys being part of bringing a web page or application to life. She has a knack for SCSS and creating semantic markup that is styled in an organized, highly usable way. More recently, she has expanded her skills in Javascript MVC frameworks, particularly AngularJS, and has experimented with more modular, scalable approaches to web application development.
About EffectiveUI
This article first appeared on the EffectiveUI blog.
EffectiveUI is the go-to UX partner for high-technology companies, including industry leaders within aerospace and aviation, biotech and healthcare, consumer and industrial electronics, defense, energy, financial services, software and telecom. In making technology more useful, useable and desirable, we help our clients reinvent significant aspects of their business — from the experience they provide to customers, to the tools used to streamline operations, to the products brought to market. We work collaboratively with clients to solve complex business problems and drive transformation through four tightly integrated areas of expertise: user research and insight, digital strategy, UX design and UI development and integration. Learn more at effectiveui.com.
