updated: October 23rd, 2006 / Ross Johnson / 5 Comments

Writing Lean CSS/XHTML Code

One of the large benefits of using XHTML/CSS over table based or inline page styling is the semantic and download time values that it brings. However, many people still have plenty of unnecessary mark-up in their code with extra div elements and unneeded classes, etc.

Start from the Top – Common Header mistakes

I am going to show a few quick examples on how you can lean up your mark-up and reach XHTML nirvana (ok, very few people will actually obtain bliss from this – and those that do scare me).

The first example I often see is through the use of stying the header of a page. It is not uncommon to see code such as this:

<div id=”header”>
<h1 id=”sitename”>MySuperSite.com</h1>
<h2 id=”sitetag”>All the superness that can be sited, ever</h2>
</div>

Hopefully most of you can see the unnecessary code here. While you can assign id’s to both the H1 and H2 headings to style them differently than headings that don’t appear in the header div – you can also cut down on your markup by simply specifying all headings with in the header div.

For example:

CSS:
#header h1 { font-size: 200%; color: #555555; }
#header h2 { font-size: 150%; color: #AAAAAA; }

XHTML:
<div id=”header”>
<h1>MySuperSite.com</h1>
<h2>All the superness that can be sited, ever</h2>
</div>

While this does add more mark-up to the CSS (which then takes longer to download) the markup is still less, and you don’t end up re-downloading the same mark-up page after page.

What about Navigation?

I see this come up time and time again. The great thing about CSS is if you plan how you are going to markup your page, you can often reduce the amount of unnecessary code. This includes assigning id’s to tags themselves instead of div’s. This reduces unnecessary clutter.

<div id=”menu”>
<ul class=”list-menu”>
<li><a href=”index.html”>Index</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

As you can see here there is a div wrapping the navigation list (ul), as well as a class assigned to the ul (most of the time to remove bullets, make them inline, etc. Here is a better approach:

CSS:

#list-menu {
list-style: none;
margin: 0; padding: 0;
background: #FFFFFF; }

#list-menu li {
display: inline;
padding: 0 5px 0 5px; border: 1px solid #AAAAAA;}

HTML:
<ul id=”list-menu”>
<li>
<li><a href=”index.html”>Index</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

As you can see we not only removed the div itself, but now we are just left with one ID that styles the whole list into a menu format.

Going further, more idea’s

Using these idea’s (location specific mark-up like styling all H1/H2 elements based on being in #header, #content, #footer, etc) – and styling tags themselves instead of wrapping them in a DIV, you can still reduce your XHTML bloat by using creative solutions to problems.

Think about what tags you have to use, and see if you can find special uses for them. I have added a background to a #pagewidth div (#pagewidth is often a fixed sized wrapper, used to align the page in the center and prevent it from extending beyond a certain width – like 760px for lower resolutions) and used the background-position tag in CSS to add a gradient background to the top of the page while the html, body in css added another background that decorated the bottom.

html, body {
background: url(../images/bottom_buildings.jpg) bottom repeat-x;
}

#pagewidth {
width: 760px;
margin: 0 auto 0 auto;
background: url(../images/gradient.gif) top repeat-x;
}

The #pagewidth tag is going to be used regardless, and this way you are giving it another function instead of creating a separate wrapper that clutters up your XHTML.

More Idea’s

There are plenty of situations where you can simply style semantic markup instead of adding unnecessary div’s and classes. Think about Definition lists, which have plenty of styling potential. They have the DL tag, the DI, and then the DD. One could easily create a complex and stretchable design with background images with out adding any unnecessary div’s and only using one ID tag (if any! if you did a #footer dl { … } ). Here are some tags that you should consider using and styling specifically:

  • Definition Lists (<DL>, <DI>, <DD>)
  • <blockquote>, <q>, <cite>
  • <form>, <label>, <fieldset>
  • <abbr> – abbreviation
  • <acronym>
  • <code> (text that is computer code)
  • <em> (emphesized text), <strong> (strong text), <sub> (subscript), <sup> (superscript)

There are tons of tags that will describe your content and can be styled, the trick is to learn and plan.

5 thoughts Writing Lean CSS/XHTML Code

  1. <blockquote>, <q>, <cite>

    <q> is already on the road to depracation for the more semantically correct <cite>.

  2. Good article, Ross. Another good aspect for cleaner code is that is it easier to read and troubleshoot, for either the author or someone else doing any modifications.

  3. Thanks Good information and great code

  4. CSS “Cascading Style Sheets” LessoNs – WeB DesigN LessoN – – Web site : http://WWW.css-lessons.ucoz.com/index.html

Comments are closed.