How do CSS and HTML Design Patterns compare to Design Patterns in Object-oriented languages?
This is a great question.
CSS and HTML are not object-oriented languages; and, thus, there are no direct corollaries between their design patterns.
There is a whole school of thought wrapped around "design patterns." In academic circles, a design pattern has four parts: name, problem, solution, and tradeoffs. In other words, a "design pattern" is a process for naming a pattern, describing a problem, showing a generalized solution, and discussing the pros and cons of the solution.
In my book, Pro CSS and HTML Design Patterns, I apply this process to create patterns. The patterns show how to use XHTML structurally and semantically and how to style and layout XHTML with CSS. All the patterns use best practices, are accessible, and are valid XHTML and CSS.
The name of the book is also a play on words, since the book is about using patterns to help us design web pages.
Below is a concrete example of an XHTML/CSS design pattern. It is the Section design pattern and it is the basic building block of all web pages. It is discussed in detail in chapter 13.
Notice that the pattern is pseudo-code for XHMTL and CSS code. HEADING and BLOCK are not XHTML elements but are placeholders for any XHTML heading or block element. TYPE is also not a CSS class, but is a placeholder for a class that specifies a semantically meaningful identifier of the section, such as "introduction", "content", "example", etc. Thus, you can see that a pattern is generalized to work with a variety of XHTML elements and CSS classes.
The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance. These selectors are discussed in detail in Chapter 3.
My book contains concrete examples of each design pattern, such as the following:
<div class="section introduction"> <h2>Introduction</h2) <p>This paragraph is about the introduction.</p> </div>