Css Design Patterns

From CSS Discuss

Jump to: navigation, search

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 -- Simon Willison

It's worth noting that the original Wiki got its start as a discussion tool for Wiki: Design Patterns , 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 Rich Selection Pattern (suggestions for name improvement welcome).

Does the Gallery Float technique count as a pattern?

Don't confuse technique with pattern. Check out the Wiki: Design Pattern Template, and some examples: Wiki: Composite Pattern , ... 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: Design Patterns ): 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: Christopher Alexander

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: Design Patterns Book

Gee, guess I must have the wrong kind of brain :( Apart from "dealing with IE YET AGAIN", I can't really think of anything that fits that description in CSS. - tarquin
More likely, my explanation is poor. I hope to have a good example soon. -- Jeremy Dunck
Would this be something like "to get context information to the user" which leads on to "put in a colourful header and some breadcrumbs if you're hungry"? Lots of techniques, but just the one problem. -- DougBTX

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 -- Petrik De Heus

Guess the nearest source of inspiration could be XML design patterns: http://www.xmlpatterns.com/. For example the "header / body" pattern "When a large amount of metadata needs to be included in an element the designer may create two children for the element, one for the metadata and one for the body of the document." - examples of the header / body pattern include HTML and SOAP.
Probably easiest to begin with a set of common problems for which CSS solutions can be defined. Defining the common problems probably means taking a step back from the coal face i.e. "A design involving a large number of styles must display acceptably to all common browsers" rather than "How to cope with IE positioning bugs".
Perhaps the "Two column layout" is a pattern, the common problem being something like "A design needs to deliver a consistent navigation interface across many unique documents" - not sure.
Somehow there's a division between "strategy" and "tactics" that needs to be made around CSS - across the web seems tactics are well addressed (although badly indexed) while there's little discussion of strategy. Put another way, personally found grokking OOP in programming easier than CSS (where I still suck) -- Harry Fuecks

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 would argue that the "Two Column Layout" is just an element of a design pattern. You could say that design patterns are general formats that work well for certain types of content. E.g. the design pattern "Technical Specs" could consist of elements such as a long one column layout, (automatically) numbered headers/footers, ul's of contents at the top, footer with references et. al. at the bottem, etcetera. A "Traditional News/Blog" pattern could be implemented as a 2 or 3 column layout, mixed with various other design elements.
I think you should see design patterns as certain general designs that work well to deliver certain types of contents or information. A collection of design elements that work well together to convey the contents to the visitor. I see things like 1, 2 or 3 column layouts, header/footer choices, yes or no pagination of articles, general use of images, etcetera as "design elements". A certain mix of these elements can make a "design pattern". Each of these can indeed be implemented in a million different ways as was suggested above -- Sander Marechal


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 Multiple Classes . Here's an example:

.baseClass { color: #fff; background: #009; margin: 10px; padding: 10px; } .childClass1 { color: #f99; } .childClass2 { text-transform: uppercase; }

Some content here
Some content here
Some content here

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. -- Rick Mason

You can find alot more on this topic at http://www.webscriptexpert.com/

Personal tools