HTML/CSS Frameworks: Useful, Universal, Usable, Unobtrusive

Published on Nov 18, 2009 (updated Jul 14, 2023), filed under development, quality (feed). (Share this on Mastodon or Bluesky?)

This is not necessarily all wrong but somewhat dated. I threw all the experience I could muster into a little book on the matter: Check out The Little Book of HTML/CSS Frameworks (updated) for a fresh look at—frameworks.

A high quality HTML/CSS framework needs to have four attributes: useful, universal, usable, and unobtrusive. The four U’s.

Useful

If an HTML/CSS framework doesn’t do what sites and the people behind the sites need, it’s useless. Garbage. Most HTML/CSS frameworks aren’t useful. They solve problems nobody has (for example, an infinite number of columns), or they ignore problems everyone has (for example, core maintenance after n months). For an HTML/CSS framework to be useful it must only address problems more than, say, 90% of all target documents have. That excludes framework customization—see Usable.

Universal

A high quality HTML/CSS framework wants to be used by as many documents as possible. And given that it might be, it then doesn’t want to do any harm. That is, it does not play havoc with any on-top layout, and it doesn’t significantly slow things down, either—see Unobtrusive. It is fine to limit the scope of “universal,” for example to a company. Public frameworks don’t limit their scope. All of them fail at being universal. (Stay with me.)

Usable

A usable framework is easy to understand and can be dumped into pretty much any document, all of this without customization. (This doesn’t mean people should do it.) You’ll see enough crazy things happening once the framework is in production. People don’t want to customize, and of those who want, most will do something you don’t expect, and be it to modify their local copy of the framework in creative ways. To make a framework usable, use as few IDs and classes as possible, narrow layout options to the most probable ones—see Universal—, and generally keep it simple.

Unobtrusive

The best framework cannot even be seen. You barely feel it. It’s like a ghost stroking your hair. It doesn’t slow documents down. It blends into the source code. It’s almost invisible. Alas, you can smell the most popular frameworks from a mile away. Maybe it’s because the document is showing in the status bar that it’s loading something from a foreign hostname. Maybe it’s because the fancy 12 column grid is only offered by framework x. Maybe it’s just paranoia. In order to make an HTML/CSS framework unobtrusive, you need to keep things simple once again, and pull out every “best practice” card you have.

❧ Now that we think about it, maybe the universal margin and padding reset—the one I had to tweet about again for simplicity reasons—is the only HTML/CSS “framework” that ever gets close to these requirements. (Choke certainly does not.)

I at least, the grim web developer, am too much in love with tailored solutions. And so I might share more about this framework I wrote for Google, maybe, the one that I referenced so subtly in July. (And yet this is still a personal post.)

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)