HTML/CSS Frameworks: Useful, Universal, Usable, Unobtrusive
Published on November 18, 2009 (ā» July 14, 2023), filed under Web Development (RSS feed for allĀ categories).
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, and Iām an engineering lead and author. Iāve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iām close to W3C and WHATWG, and I write and review books for OāReilly and FrontendĀ Dogma.
With my current move to Spain, Iām open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedInĀ profile.
I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views andĀ experiences.
Comments (Closed)
-
On November 18, 2009, 19:23 CET, Neovov said:
Thanks for the ending teasingā¦
This go.css made me do some regular expression to make it readable (but still uncomprehensible).Nice post, but Iām still wondering if a great HTML/CSS framework can exists (depending of the āframeworkā definition). Maybe if you have to make a billion pages for an huge customer. But for different customers?
Through the time I made a kind of HTML/CSS squeletton I use in each project I work on. But I find it still uncompleteā¦ (Iām sure you can help š )
BTW, isnāt there a problem with the Chokeās file weight in your post ? (Choke 1.0 (ZIP, 189,210,670 KB))
-
On November 18, 2009, 22:08 CET, Vladimir Carrer said:
Interesting thoughts.
If I should define CSS Framework in one sentence I will say: CSS Framework is making high level reusable CSS Code -
On November 20, 2009, 10:39 CET, Thomas @ DailyThomas.com said:
Maybe, one day, Iāll start using a html/css framework. For now, I just donāt see the benefit of it. Maybe Iām just too conservativeā¦ I also still use wsftp95 for uploading my filesā¦ lol !
-
On November 24, 2009, 14:34 CET, Richard said:
There will probably never be an ideal HTML/CSS framework but often it is a case of just avoiding reinventing the wheel (even if the wheel we are using is a little wonky and doesnāt handle corners well, ha ha).
Do you have have any recommendations on frameworks that meet or come close to your ideals? -
On November 30, 2009, 15:12 CET, Alan Gresley said:
Just give me some pieces of 4 by 2 (timber), nails and a hammer and all is well. I build up code fragments like this in NoteTab.
<code < > ^!InsertHtml <CODE><^&></CODE> <li><a href="" ^!InsertHtml <LI><A href="">^&</A></LI>
This produces this in the source.
<code><></code> <li><a href=""></a></li>
You can create some very large code fragments and even optional selection boxes. Take some time to build up though.
Frameworks look so bloated in comparison.
-
On December 23, 2009, 18:54 CET, Alan said:
Meiertās four Uās sounds like a good principle to me, Maybe i should be concentrating on the last one since it looks like google will be leaning more and more on the speed of websites after adding the speed section to the webmaster tools.
-
On May 10, 2010, 15:13 CEST, Webstandard-Blog said:
Sounds good Jens, but a lot of those HTML-& CSS-Frameworks includes a lot of code-overhead you donāt really needs (mostly). Therefore I reduce it, as much as I can and the web-projetc needs.
Read More
Maybe of interest to you,Ā too:
- Next: SUS: How to Easily Grade Your Siteās Usability
- Previous: The 3 Ground Rules for Writing HTML
- More under Web Development
- More from 2009
- Most popular posts
Looking for a way to comment? Comments have been disabled,Ā unfortunately.
Get a good look at web development? Try WebGlossary.infoāand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, andĀ Leanpub.