Mission Log

We love talking about interactive design and development.

The Conservation of HTML

Disclaimer: I'm in no way blaming, or targeting, anyone for the. It may easily be artifacts from a constrictive framework, or left over from legacy code.

Introduction

In my travels around the web as a maintence contractor, I've encountered some sloppy code. I'm not referring to the 5-10 year old website or web application either. I'm referring to relatively new code. This is where we'll spend the majority of our time. Looking at easy ways to improve our code, and reduce the overall lines of code written.

The benefits should be obvious:

  • Smaller file sizes
  • More flexibility in development
  • Less time spent in markup
  • Code that is easier to work with
  • Easier updating of front end interfaces

What Not to Do

So what is unnecessary code? The bulk of unnecessary code we've encountered exists right in the HTML markup. While it may seem easy to 'just add another <div>', ask yourself first, "Is this element absolutely necessary?" Let's take a look at an example:

<div class="wrapper">
  <div class="bottom-margin">
    <div class="big-padding">
      <span class="red-text"><a href="http://example.com" class="link">Markup</a></span>
    </div>
  </div>
</div>

You may look at the above code and see some problems, as you should. This example is intentionally extreme, but get's the point across. Relying HTML elements to apply style is wrong. More specifically, using one CSS class per element is bad practice. Doing so creates problems that requires yet more HTML elements and more CSS, in which you essentially are doubling your effort.

So how should we handle it then?

Combine Classes

Instead of relying on HTML elements for applying classes and styles, combine your classes together in one element's class attribute as exampled below:

<div class="wrapper bottom-margin big-padding red-text">
  <a href="http://example.com" class="link">Markup</a>
</div>

To push this example even futher, there may be times to rely on a generic style that's applied to an element rather than adding extra classes to your HTML markup. In the example above, trying to make a link red through the 'red-text' class, simply combine that CSS with the anchor text. Furthermore, you can remove the 'link' class, and simply apply your CSS directly to the anchor tag. For example:

Before:

.red-text {
  color: red;
}

.link {
  text-decoration: underline;
}

After:

a {
  color: red;
  text-decoration: underline;
}

As you can see, the result is fewer lines of code, as well as a CSS stylesheet that's easier to understand.

Utilize Pseudo elements :before and :after

While these don't have universal support in browsers, all modern browsers support the use of :before and :after CSS pseudo elements. These are great for generating a extra characters, arrows, or adding some particular style to an element.

For instance, if you want to add an icon element in front of a headline, instead of adding an HTML <span> tag into every <h1> on your page, simply use a snippet of CSS like this:

H1:before {
  display:inline-block;
  content: "http://example.com/images/icon.png";
  width: 30px;
  height: 30px;
  margin-right: 1em;
}

Summary

A basic goal of good web development is to write as little as possible, and reuse the same code. Write it once, then apply liberally. Not only that, but utiliizing pseudo elements can often completely remove HTML markup from your document. Keep these in mind when you're coding your next project. It might take some getting used to at first, but you'll thank yourself later.

Comments

Interested in working with us?

Contact Us Now