Jens Oliver Meiert - The Little Book of Little Books: HTML and CSS Frameworks, Coding Guidelines, Quality Control

Dedicated to the Google Webmaster Team under Dennis Hwang

Many commercial websites these days are based on frameworks, and many personal websites use them, too. Yet what are frameworks, why and when do we need them, and how do we best use or build them?

This little book explores frameworks that govern HTML and CSS (and JavaScript) code. It focuses on HTML and CSS because these are at the heart of every web project. The principles outlined in the book, however, can also apply to other forms of frameworks.

The goal of the book is to share solid, higher-level ideas around frameworks, trading some specificity for long-term usefulness. We could analyze all the different frameworks that are out right now, but if you wanted to make up your own mind or write a framework yourself, how useful would such review be if you picked this book up again in five years?

While the book attempts to cover all bases, it glosses over some of them, too. Web development has become a large field. Also, as well see shortly, framework development pivots around tailoring, and tailoring depends on circumstances. We dont know every projects circumstances, so we cant generalize everything.

Although written in simple language, the book is geared toward expert web developers; the people who decide whether to use a framework, how to use it, and whether to develop one.

It has likewise been written by a web developer. I, Jens, have during my career architected frameworks for OPEN KNOWLEDGE, GMX, Aperto with their government and business clients, as well as Google. In that time, I havent managed to outwit the fast pace of our industry, but Ive found that some principles, methods, and practices contribute to longer-lasting code. That has benefited the frameworks I wrote, and I hope it will benefit you through this book, too.

Id like to thank the following people for their help with this book: Tony Ruscoe for reviewing and advising to the first draft. Asim Janjua, my good friend, for sharing some of his thoughts. Eric Meyer for the generous foreword [for the original edition]; if it wasnt for Erics work, a huge part of the web development world would look grim today, technically speaking. Simon St.Laurent and Meg Foley for guiding the book down the right track at OReilly. The OReilly staff, particularly Kristen Brown, and the many other friendly, supportive people involved in making this information accessible and enjoyable. Julia Tang for her always loving support. The W3C and WHATWG groups, the Google Webmaster Team, and the people Ive worked with over time who made me a better web developer. Thank you.

Before we dive into frameworks, lets first go over a few general ideas. We dont have to agree on everything; all we want is to prevent misunderstandings over the course of this book.

First, there are a handful of terms that may be used differently in other contexts:

• External (also known as public or open): Anything that comes from outside ourselves or our organization and is out of our control. In web development, social site widgets or frameworks are often external.
• Internal (or in-house): Anything that originates from within our organization and is within our control. In web development, site designs, or site style sheets, are often internal.
• Pattern: A classical design pattern. In web development, the individual elements of a document or app are patterns, but so are document types like a three-column article page.
• Cost: A measure of any negative consequence. Typically expenditures of work, time, or money, but possibly negative changes in, for example, perception, satisfaction, or reputation. In web development, for instance, any element added to a page has a cost in terms of reduced page performance.
• Tailoring: The producing and adjusting to precise dimensions and needs. In web development, tailored code is the code thats needed by a project, but not more.

Second, some assumptions:

• Code has a cost. For example, theres the cost of development, performance, maintenance, documentation, process, quality, and conversion (though not all of them always apply, and not all of them affect the same groups). Unnecessary code has an unnecessary cost.