Webpatterns: HTML & CSS working together

John Allssop wrote an article about using webpatterns in HTML and he wondered if we could gather these patterns and put them on a website. He started a blog and a wiki on webpatterns.org to document webpatterns. It is not active yet but I really think you should keep an eye on it. He is going to start a quizz similar to the “SimpleQuizz from Dan Cederholm”.

In the article, John talks about the use of classes and id’s but I doubt we can restrict webpatterns to HTML only. Most of the webpatterns that exist on the web today come from problems when using HTML together with CSS. And from that perspective, the relation between HTML and CSS is similar to the relation between XML and XSLT.

I previously wrote an article about the XML/XSLT combo. When to choose between pointing to an element or including an element. This relates to the use of attributes or elements. When to point or include depends on what you want to achieve with the XSLT transformation.

In many cases you can improve your XML if you think about the XSLT transformation that will happen later on. This same thinking can improve your HTML and CSS code.

Pointing in HTML and CSS is the same as using an id or class attribute and use an id selector for a rule in your style sheet.

HTML CSS

#navBar{ declaration in here}
# content { declaration in here}

<div id="navBar&gt";</div>
<div id="content"></div>

XML/XSLT

<xsl:value-of select="element[@id=" navBar"]"/>
<xsl:value-of select="element[@id=" content"]"/>

<element id="navBar"/>
< element id="content"/>

In this case you can use an id to point to the element in question.

Now if you have nested elements and you include the element you want to transform or style, you get something like this.

HTML CSS

div#contact ul li, div li {declaration in here}

XML/XSLT

<div class=”contact”> <ul> <li> … 

<contact><person><lastName> …. <xsl:value-of select=”contact/person/lastName”/>
or
<xsl:Value-of select=”contact//lastName”/>

We can call the first example redundant because using an id and pointing to each element will result in a large stylesheet with lots of repetition.

The second example is using dependency because your are depending on relationships between elements.

The article “Dependency versus redundancy”on mezzoblue clearly documents the difference between the 2 patterns. Both directions, coding for redundancy or dependency, have their own advantages and in many cases your are going to use both.

To come back to the pattern subject, the pattern would tell you when to choose for redundany or dependency. When to use an id or notand rely on child parent relations.

And I think it is clear that this relates to both CSS and HTML.

To close this post, I am really expecting to see big things happening on the webpattern.org website but only if we provide feedback and tell John if this or that pattern actually works.

So go and have a look and subscribe to his feed.