Object-Oriented CSS: What, How, and Why

It sounds like an oxymoron, or at least an impossibility, doesn't it? How can a static language that's really more like markup than programming be object-oriented? In this tutorial, I'm going to introduce you to the idea of object-oriented CSS, show you how it works, and try to convince you that you should be using it too!

What is Object-Oriented CSS?

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It's not a different language: still the same old CSS we all know and love. It's just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

So why call it object-oriented? Well, according to Wikipedia,

Object-oriented programming (OOP) is a programming paradigm that uses "objects" — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.

If we were to re-write that definition for object-oriented CSS, it might say something like this:

Object-oriented CSS is a coding paradigm that styles "objects" or "modules"—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

This basically means that you have a standard "object" (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.

Confused? Let's look a bit of theory.

What is the Theory Behind it?

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.

I quote Nicole Sullivan, whose brainchild object-oriented CSS is. So how do these two principles play themselves out?

Separating the structure from the skin means that your layout styling and your design styling are separate. One very practical way to do this is to use a grid system; there are many options, or you can create your own. If you're not using a grid system, you'll probably just define the structure on the primary object on your page; that's what we'll be doing today.

Separating the container from the content means that any object (the container) should be able to adapt itself to accept any content; for example, it shouldn't need to have an h3 at the top, followed by an unordered list for it to look right. This allows flexibility and reusability, which is paramount.

Why Should I Code This Way?

There are a few good reasons why you would want to write your CSS in an object-oriented way. One of the biggest benefits—and we've already mentioned it—is that your CSS will be more reusable. But your stylesheets should also become much smaller. Object-oriented CSS should make it easier to change the design of a site.

Writing your styling this way can also give you peace of mind: it will be much easier to change parts of your site without breaking things. Object-oriented CSS also enables you to change your site consistently.

How do I Practice Object-Oriented CSS?

Well, if you've come this far, you're interested in how exactly you write CSS with an object-oriented mindset. Here we go!

The first step is really prep for the CSS: you have to determine your HTML object. Generally, your object will have a header, a body, and a footer, although the header and footer are optional. Here's a very basic object.


<div class="object">
    <div class="head"></div>
    <div class="body"></div>
    <div class="foot"></div>
</div>

Before you scream "DIVITIS!" realize that this isn't as bad as it looks; consider this:


<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

Using HTML5, we now have got an object with semantic meaning and no soup-like characteristics. Actually, this is the object we'll use today.

If we're going to write some CSS, we'll need something to style, so let's whip up a very basic template: a blog home page, and a single post page. We'll be using a few HTML5 elements and some CSS3 styling today!

index.htm


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Object Oriented CSS</title>
    <!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!-- This makes IE recognize and use the HTML5 elements -->
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/text.css" />
    <link type="text/css" rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <article id="container">
      <header>
        <h1>Object Oriented CSS</h1>
        <h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
        <nav>
          <ul>
             <li><a href="index.htm" class="selected">Home</a></li>
             <li><a href="=post.htm">Archives</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>

      <section>
        <article class="post">
          <header>
            <span class="date">September 10, 2009</span>
            <h2><a href="post.htm">Check out WorkAwesome!</a></h2>
          </header>
          <section>
            <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
        <article class="post ext">
          <header>
            <span class="date">September 7, 2009</span>
            <h2>The Intro Post</h2>
          </header>
          <section>
            <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
        <article class="post">
          <header>
            <span class="date">September 5, 2009</span>
            <h2>Welcome</h2>
          </header>
          <section>
            <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
      </section>
      <aside> 
        <article class="side-box">
          <header>
            <h2>Archives</h2>
            <p>look into the past</p>
          </header>
          <section>
            <ul>
              <li><a href="#">August 2009</a></li>
              <li><a href="#">July 2009</a></li>
              <li><a href="#">June 2009</a></li>
              <li><a href="#">May 2009</a></li>
              <li><a href="#"> . . . </a></li>
            </ul>
          </section>
        </article>
        <article class="pop-out side-box">
          <header class="post-it">
            <h2>Recent Comments</h2>
            <p>see what folks are saying</p>
          </header>
          <section>
            <ul>
              <li>
                <p>I think oocss is really cool!</p>
                <p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
              </li>              
              <li>
                <p>Are you kidding? CSS can't ever be Object Oriented.</p>
                <p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
              </li>              
              <li>
                <p>Envato has done it again; workAwesome is simply awesome!</p>
                <p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
              </li>              
              <li>
                <p>I really like the site's desing; another work of art from Collis.</p>
                <p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
              </li>            
            </ul>
          </section>
        </article>
      </aside>

      <footer>
        <ul>
          <li>Standard</li>
          <li>Footer</li>
          <li>Information</li>
          <li>Yada</li>
          <li>Yada</li>
          <li>© 2009</li>
        </ul>
      </footer>

    </article>
  </body>
</html>

I know it's kind of long, so here's a diagram of our basic structure:

Look familiar? That's our object, with an aside added for our sidebar. We'll look at the single post page a bit later, but let's hop into some CSS right now!

You'll notice that we are linking to three stylesheets: reset.css, text.css, and styles.css. Reset.css is Eric Meyer's reset. Text.css is important: the second step of object-oriented CSS is styling a few key basic elements; usually, these are text elements, like headers and lists. Styling these objects is important because it determines the consistent look and feel of the site; these elements, for the most part, won't receive any additional direct styling.

Here's what we've got in our text.css:


body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }

(Hats off to the 960 Grid System, whose text.css file this is spun off.)

Now we'll start building styles.css; this is where the object-oriented magic begins. However, I'll first just throw in a few top-level styles, just to set a body background and some link and list styles.


body 
  { background:url(../img/grad.jpg) repeat-x #c0c0c0; 
  }
/*Note: All the image will be in the downloadable source code. */
a 
  { text-decoration:none; 
    color:#474747; 
    padding:1px;
  }
a:hover 
  { background:#db5500; 
    color:#fff; 
  }
.selected 
  { border-bottom:1px solid #db5500;  
  }
li 
  { padding-left:15px; 
    background:url(../img/bullet.png) 0 5.9px no-repeat; 
  }

Our first order of business is to define the structure of the page:


#container                                    
  { margin:40px auto; 
    width:960px; 
    border:1px solid #ccc; 
    background:#ececec; 
  }
  #container > header, #container > footer                         
    { padding:80px 80px 80px; 
      width:800px; 
      overflow:hidden; 
      border: 1px solid #ccc; 
      border-width:1px 0 1px 0; 
    }      
  #container > header                         
    { background:url(../img/header.jpg) repeat-x #d9d9d7; 
    }
    #container > header li, #container > footer li
    { float:left;
      padding:0 5px 0 0;
      background:none;
    }
  #container > section                        
    { background:#fdfdfd; 
      padding:0 40px 40px 80px; 
      float:left; 
      width:493px; 
      border-right:1px solid #ccc; 
    }
  #container > aside                          
    { padding-top:20px; 
      float:left; 
      width:346px; 
    }
  #container > footer                         
  { padding:40px 80px 80px; 
    background:#fcfcfc;
  }
    #container > footer li:after              
    { content:" |" 
    }
      #container > footer li:last-child:after 
      { content:"" 
      }

Notice that we're styling our container object by starting all our selectors with #container. However, that's a special case: usually, you will want to use classes, because they are freely reusable.

We can use class selectors for our post styling:


.post                     
  { overflow:visible; 
    margin-top:40px; 
  }
  .post > header          
    { margin:0 0 20px 0; 
      position:relative; 
    }
  .post .date             
    { padding:2px 4px ; 
      background:#474747; 
      color:#ececec; 
      font-weight:bold; 
      transform:rotate(270deg);
      -moz-transform:rotate(270deg);
      -webkit-transform:rotate(270deg);
      position:absolute; 
      top:60px; 
      left:-105.5px; 
    }
  .post img               
    { float:left;  
      margin-right:10px;
    }
    .post.ext img         
      { float:right; 
        margin:0 0 0 10px; 
      }
.post footer            
    { overflow:hidden; 
    }
  .post footer li
    { float:left; 
      background:none;
    }

Let's look at what makes this CSS object-oriented. Firstly, we have not limited the class to a specific element; we could add it to anything. This gives us the most flexibility possible. Then, notice that we haven't set any heights or widths; that is part of separating the structure from the skin; we already wrote the sturcture styling, so this object will fill whatever space the structure gives it.

Also, we have styled all the elements involved in an independant way: the parent elements don't require certain children to look right; although we have styled child elements, nothing will break if they aren't there. And the child elements are, for the most part, not dependant on their parents; I haven't styled the h2 in a post object, because it should be consistent across the site; we already took care of that in text.css.

There's another important bit, the part most like object-oriented programming: extended classes. You probably saw that we have styling for both .post img and .post.ext img. I'm sure you know what they will do, but here's the proof:

Simply by adding another class to your object, you can change minor parts of the look and feel; I should mention that Nicole Sullivan would have created a class called .postExt, and then applied both to the object; I prefer to do it this way, because it allows me to use the same class name ("ext") for all my extensions, and I think it makes the HTML look cleaner. You just have to remember not to put a space in the selector; ".post .ext" will look for an element in class ext inside an element in class post. Without the space, it will look for an element in both classes.

On to the Sidebar

Now that we have the main content area set out, let's look at the sidebar. We've got two objects in the sidebar: an archives list and a recent comments list. To begin, we'll create a .side-box class for them:


.side-box 
  { padding: 20px 80px 20px 40px; 
  }
  .side-box:not(:last-child) 
    { border-bottom:1px solid #ccc; 
    }
    .side-box > header h3 
      { margin-bottom:0;  
      }
    .side-box > header p  
    { text-transform:uppercase; 
      font-style:italic; 
      font-size:90%; 
    }

Again, you should take note that we're being careful to follow the two rules: we've separated the structure from the skin by not setting the height or width; the object flows to fill whatever space it needs to take. And we've separated container from content by not making child elements required for proper styling. Yes, I have adjusted the h3 styling, which makes that particular h3 look dependant on the class side-box; in most cases, that's undesireable, but in this case, I haven't done too much.

But let's create an extension for this; however, since we want to do a large visual adjustment, we won't extent the side-box class directly; we'll create a new class.


.pop-out > section > * 
  { display:block; 
    background:#fefefe; 
    border:1px solid #474747; 
    padding:20px; 
    position:relative; 
    width: 120%; 
    left:20px; 
  }

So what does this do? Notice the selector: we are targeting every element directly inside the body of our object; when styling an object, you always apply the class to the object itself. This CSS will "pop" the content out to the right.

"HEY, you set a width! What about separating struture from skin?" I set a width because we are targeting the elements inside the body of our object; since the object has padding, that inner element is a bit narrow by itself. That sounds like an excuse for breaking the rule, but I don't think I really broke the rule: I set the width as a percentage, which still depends on structure styling further up the cascade.

Here's what that looks like.

I just told you that you should always apply classes to the top-level objects, and use child selectors to mold the inner elements. But part of object-oriented CSS is being able to mix and match styles easily. It's quite possible you'll want to use a similar header on two objects that aren't really related in any way. It's ideal to have a collection of header and footer classes that you apply directly to the header or footer of an object. This way, you aren't adding similar code to multiple non-related classes, but abstracting that away and applying it in the relevent place. Let's create an abstracted header.

You'll notice that we gave the header of our recent comments object a class called 'post-it.' Let's create that class now.


.post-it 
  { border:1px solid #db5500; 
    padding: 10px; 
    font-style:italic; 
    position:relative; 
    background:#f2965c; 
    color:#333;
    transform:rotate(356deg);
    -moz-transform:rotate(356deg);
    -webkit-transform:rotate(356deg);
    z-index:10; 
    top:10px; 
    box-shadow:1px 1px 0px #333; 
    -moz-box-shadow:1px 1px 0px #333; 
    -webkit-box-shadow:1px 1px 0px #333; 
  }

A poor semblance of a post-it note!

It's important to stress that even though we plan to use this for a header, we haven't specified that in the selector. If this resembles a common design aspect of our site, we may end up wanting this style for something else; for example, we could extend it with classes that adjust the colour and rotation, and use them on a wall or bulliten board or something similar.

Don't lock down your selectors; you never know when you'll want those styles!

Often you'll want to take it further than just header and footer classes; a component library is a huge part of object-oriented CSS; a basic rule might be this: whenever you want to apply the same style in multiple un-related places, abstract. Of course, you might find after hard coding something into an object that it would be more useful if you could use it elsewhere; don't be afraid to refactor. It's always to your benefit.

You'll see these components in the page header and the recent comments box.


.meta 
  { font-size:75%; 
    font-style:italic; 
  }
.subtitle 
  { text-transform:uppercase; 
    font-size:90%; 
    font-weight:bold; 
    letter-spacing:1px; 
    text-shadow:1px 1px 0 #fff; 
  }

Well, we're done with our index page; let's look at a bit more object-oriented-ness on a single post page. Just copy that index page, rename it 'post.htm' and swap out the page header and section for this code.


      <header>
        <h1>Object Oriented CSS</h1>
        <p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
        <nav>
          <ul>
             <li><a href="index.htm">Home</a></li>
             <li><a href="#" class="selected">Archives</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      <section>
        <article class="post">
          <header>
            <span class="date">September 10, 2009</span>
            <h2>Check out WorkAwesome!</h2>
          </header>
          <section>
            <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Digg!</a></li>
              <li><a href="#">Share!</a></li>
              <li><a href="#">Like!</a></li>
            </ul>
          </footer>
        </article>
        <article class="comments">
          <header><h2>Comments</h2></header>
          <section>
            <article class="comment">
              <header><p>First-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
            </article>
            <article class="reply comment">
                  <header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
                  <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
                </article>
            <article class="comment">
              <header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
            </article>
            <article class="author comment">
              <header><p>The author</p><p class="meta">Sept 11</p></header>
              <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
            </article>
            <article class="comment">
              <header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
              <section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
            </article>
          </section>

Now we can see where some reusability comes in; we can use the post class for the blog posting here; that's the same post class we used for the home page; because we didn't specify the structure, but let the object expand to take in whatever we give it, it can handle the whole post.

Comments

Now let's turn our attention to the comments on this page; comments are a great place to use object-oriented CSS. We'll start by adding this:


.comment 
  { border:1px solid #ccc; 
    border-radius:7px; 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    padding:10px; 
    margin:0 0 10px 0;
  }
    .comment > header > p 
      { font-weight:bold;  
        display:inline; 
        margin:0 10px 20px 0; 
      }

This alone gives us some psuedo-attractive comments; but we can do more. Our HTML has classes for replies and author comments.

  
.reply.comment 
  { margin-left:80px; 
  }
.author.comment 
  { color:#ececec; 
    background:#474747; 
  }

Make sure you don't have a space between the two class names. This is a bit different from what we did earlier: instead of changing the styling of the comment class, we are actually extending it (So maybe these are the real extended classes).

And the finished comments . . .

And while we're here, let's add a comment form to our component library.


.comments-form p 
  { padding:5px; 
    border-radius:5px;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px; 
  }
.comments-form p:hover 
  { background:#ececec;  
  }
.comments-form label 
  { display:inline-block; 
    width:70px; 
    vertical-align:top; }
.comments-form label:after 
  { content: " : "; 
  }
.comments-form input[type=text],
.comments-form button,
.comments-form textarea 
  { width:200px; 
    border:1px solid #ccc; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    padding:2px; 
  }
.comments-form button[type=submit] 
  { margin-left:70px; 
  }

This gives us a nice rounded-corner form with a soft hover effect.

I'm kind of torn here; a fundamental concept of object-oriented CSS is the ability to add a class to different elements; but what about this case? This class would basically be useless on anything but a form; should we change the selectors to form.comments-form as a kind of security? What do you think?

Well, that really covers the ideas of object-oriented CSS.

Review the Main Steps

Determine your object.
Set your reset, base elements, and base object styles.
Apply classes to objects and components for the desired look and feel.

I didn't use the standard message example, but it's really a great way to get into object-oriented CSS. Try creating an message class that you can apply to different elements, like a paragraph, a list item, or a complete object. Then, extend it with error, warning, and info classes. See how flexible and reuseable you can make it.

Is Object-Oriented CSS Always Useful?

I don't think the answer to this question is a simple "yes" or "no"; that's probably because object-oriented CSS isn't a language, but a collection of patterns and best practices. You may not always want to apply the idea of the standard HTML object, but most of the CSS principles are always valid. If you think about it, you'll see it's really about where you want to optimize: you could code you're HTML minimalistically, with a few ids for handles, and be able to style it easily; but the CSS won't be reusable, and the site might break later when you come to change things. Or you could write a bit more HTML and optimze the CSS with the principles we've looked at in this tutorial.

I'm willing to expand my HTML a bit so that I can write CSS that is reusable, flexible, and DRY. What's your opinion?