CSS a Myth? I don’t think so…

I was doing some browsing for articles at talk about best practices in terms of blog site designs, and happened across this article:

The Myth of CSS | alexking.org
I’m reading through the 63 comments on Matt’s code is food post and I inevitably got to one that mentioned that using CSS to separate content and presentation is a good thing.

I’ve made this argument myself a number of times, but in many ways this is a farce.

Now, I am familiar with Alex King and his work, and I have a lot of respect for him and his ability, but I think he was attempting to illustrate and extreme of CSS and HTML programming that didn’t really come across as well as he was trying.

For example, he would say that this is bad, and he would be right:

<body>
  <div id="wrapper">
    <div id="header">
      <h1>Header text or banner</h1>
      <div id="nav">
        <ul>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
    <div id="columns">
      <div id="column1">
        <div class="listBox">
          <ul>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
        <div class="listBoxAlternate">
          <ul>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
      </div>
      <div id="column2">
        <div class="headerBlock">
          <h1>Header Value...</h1>
        </div>
        <div class="content">Text</div>
      </div>
      <div id="column3">
        <div class="listBox">
          <ul
            <li>List item<li>
            <li>List item</i>
          </ul>
        </div>
      </div>
    </div>
    <div id="footer><span class=">footer text</div>
  </div>
</body>

The above example, while technically a “Pure CSS Layout”, it still breaks a lot of rules and makes use of the “tag soup” that Alex was describing. The following is a better example of a way to write that code:

<body>
  <h1 id="banner">Header text or banner</h1>
  <ul id="nav">
    <li>List item</li>
    <li>List item</li>
  </ul>
  <div id="column1">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
  <div id="column2">
    <h1>Header Value...</h1>
    <p>Text</p>
  </div>
  <div id="column3">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
  <p id="footer">footer text</p>
</body>

This code is much cleaner, and with the right CSS tags, renders the same basic 3 column layout as the first one. However the number of unnecessary tags have been reduced and the code is much easier to read. This is a more ideal way to write an HTML page with the idea of presentation and code being separate.

However, Alex goes on to dispute the use of div tags entirely, stating that their only purpose is for display, and thus the use of them breaks the code/display separation rule. It’s true that div tags are used heavily for display purposes, but I think to classify them solely as presentation in purpose is somewhat short-sighted.

The use of divs not only provides a good working mechanism for arranging content, it also allows us to logically group it as well. Books are divided into chapters, file cabinets are divided into drawers, so why not divide page content into div tags? It’s easy to say that they are only for display purposes, because there isn’t yet a device or method of rendering this kind of content where having logically grouped content is useful. Notice how I say yet.

Separation of code and presentation logic is not a farce, but it does require some careful forethought and planning on the part of the developer. It’s easy for designers or developers to forget that fact and write “tag soup”. I know this, because I have done it myself.

Related articles


Comments

Leave a Reply