Renaissance Nerd

The Markup

This is part three of what has spontaneously become a series.

Part 1: Writing Modular and Reusable CSS

Part 2: HTML5 and IE8

In part one, I neglected to include any HTML because I wanted to focus specifically on the CSS. But without looking at the HTML, the niftiness of the CSS is lost.

Here, then, is a quick look at why using classes (rather than IDs) makes for easier maintainability, and how writing element-agnostic classes makes our CSS reusable.

Classes vs. IDs

Suppose we had created the profile box with a div using an ID instead of a class. Convention says this is acceptable since the profile box is only intended to appear once on each page—it’s unique.

    <div id="profilebox">

The CSS would have looked like this:

    #profilebox img, #profilebox h3, #profilebox p { float: left; }

    #profilebox img { margin-right: 10px; }

    #profilebox h3 {
      margin: 0 0 10px 0;
      width: 150px;
    }

    #profilebox p { font-size: 1.3em; }

    #profilebox .profile_button {
      float: right;
      margin: 0;
    }

Great! Now we have to create the list of people in the Following box. Since the list contains multiple items, it makes sense to use a class.

    <ul>
        <li class="following"><img src="http://placehold.it/30x30" alt="Profile Picture" /><p><a href="#">Jane Doe</a></p></li>
        ...
        ...
    </ul>

And the CSS would have looked like this:

    .following { margin-bottom: 10px; }

    .following img, .following p {
        display: inline;
        vertical-align: middle;
    }

    .following img { margin-right: 10px; }

    .following p { font-size: 1.3em; }

We start to see the first problem: there’s overlap between our following class and our profilebox ID.

    .following img { margin-right: 10px; }
    #profilebox img { margin-right: 10px; }

    .following p { font-size: 1.3em; }
    #profilebox p { font-size: 1.3em; }

The second problem is a bit hidden. Our designer comes back after we’ve completed the first draft of the CSS and says, “Ten-pixel gutters on images are out. Twenty pixels is the new hotness.”

We’ve declared two instances where this will have to be fixed:

    #profilebox img { margin-right: 10px; }

    .following img { margin-right: 10px; }

If we continued to code in the same fashion, the profile pictures in the review timeline would have presented a third instance that would have to be changed. Our solution in part one gets around this by using a single class for both elements and defining the image gutters once.

On Classing Specific Elements

Suppose we had written the CSS for our itembox class by targeting a specific element (in this case, the div).

    div.itembox img, div.itembox h3, div.itembox p { float: left; }

    div.itembox img { margin-right: 10px; }

    div.itembox h3, {
      margin: 0 0 10px 0;
      width: 150px;
    }

    div.itembox p { font-size: 1.3em; }

    div.itembox .profile_button {
      float: right;
      margin: 0;
    }

Not only would we have added 21 additional characters to the file, we would have made it impossible to reuse the class on the list items in the Following and Trending boxes. The solution that we came up with in part one was much more flexible because it was element-agnostic.