Here's the pitch: Design Patterns in software engineering (as documented in the [Gang of Four book]) define a set of standard problems, their solutions from an architectural point of view and, most importantly, a catchy name for them. These names (things like Factory, Iterator etc) have become a useful shared vocabulary for software designers, who can use them to discuss relatively complex concepts without needing to expand on each one individually when it comes up in conversation.
I believe CSS has matured to the point where some kind of "pattern language" could really help promote more complex discussion of CSS techniques -- SimonWillison
It's worth noting that the original Wiki got its start as a discussion tool for Wiki:DesignPatterns, among other things.
I've been calling the technique of wrapping 4 divs around some content to get lots of border images the "many-divs" approach. Now you can use it too! - DougBTX
I'd say this is one technique for an underlying pattern... Check out RichSelectionPattern (suggestions for name improvement welcome).
Does the GalleryFloat technique count as a pattern?
Don't confuse technique with pattern. Check out the Wiki:DesignPatternTemplate, and some examples: Wiki:CompositePattern, ... A pattern is a general problem and solution description, not a how-to. In general, you look at a collection of related techniques and try to identify an underlying pattern.
(Commence blantantly ripping off Wiki:DesignPatterns):
Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. -- Wiki:ChristopherAlexander
A design pattern systematically names, motivates, and explains a general design that addresses a recurring design problem in object-oriented systems. It describes the problem, the solution, when to apply the solution, and its consequences. It also gives implementation hints and examples. The solution is a general arrangement of objects and classes that solve the problem. The solution is customized and implemented to solve the problem in a particular context. - Wiki:DesignPatternsBook
How about the 2-column Blog Layout Pattern? A fixed-width layout, a header and 2 columns of unequal width. Or the Multicolumn Screen Filler Pattern? A liquid layout with 2 or more columns. For example: mozilla.org or coda.co.za --PetrikDeHeus
Still not sure if I get this... but perhaps "Two column layout" is itself one possible way of implementing the pattern "main content + link"? -- tarquin
I'd suggest an "Inheritance" pattern. CSS doesn't have inheritance in the way that OOP languages do, but you can use something close to it using MultipleClasses. Here's an example:
.baseClass { color: #fff; background: #009; margin: 10px; padding: 10px; }
.childClass1 { color: #f99; }
.childClass2 { text-transform: uppercase; }
<div class="baseClass">Some content here</div>
<div class="baseClass childClass1">Some content here</div>
<div class="baseClass childClass2">Some content here</div>
By applying both a base class and a child class (or classes) you get the properties of both, with the child overriding the base, much like in OOP inheritance. This is a design pattern rather than a specific technique because it can be applied to all kinds of situations - boxes, fonts, lists, entire page templates - anything. -- RickMason?
You can find alot more on this topic at http://www.webscriptexpert.com/