May 8th, 2006

Giving Markup Some Class

One of the great things about CSS is the ability to give elements a class or id. The trouble is, like many other elements of XHTML/CSS, they can be abused. I know when I first began using CSS, I would give just about anything a class just because I could. I would then style elements based on their class, completely disregarding semantics. What resulted was cluttered markup filled with far too many class declarations, and a stylesheet that could use a trim.

<h1 class="main">Lorem Ipsum</h1>
<h2 class="level2">Fusce tellus</h2>
<p class="standout">Nam hendrerit. Vivamus mollis ipsum ac nisl. Fusce adipiscing. Nunc nec felis at neque vestibulum bibendum. Nulla commodo sollicitudin erat. Praesent feugiat.</p>
<h2 class="level2">Vestibulum at velit</h2>
<p class="regular">Vivamus mattis nunc quis metus. Nunc lobortis. Vestibulum sed tellus. Duis auctor.</p>

Coming Up With a Solution

While completely valid, markup like that degrades the stability of your code. When every element is given a class, you as the developer will need to continually remember to assign each and every element that class when you want the associated style applied.

A Recommendation

Instead, I recommend taking a step back and looking at the parent elements. Chances are there is a container element such as a div that definately deserves its own class and has one. You can use this to your advantage and have the container element act as a support for your style. Use the parent element to style the children.

div.content h1 { font-size:2.2em; }
div.content h2 { font-size:1.7em; }
div.content p { margin-bottom:1em; }
div.content p em { background-color:#efefef; }

Using CSS such as that would allow for the following markup:

<div class="content">
<h1>Lorem Ipsum</h1>
<h2>Fusce tellus</h2>
<p><em>Nam hendrerit. Vivamus mollis ipsum ac nisl. Fusce adipiscing. Nunc nec felis at neque vestibulum bibendum. Nulla commodo sollicitudin erat. Praesent feugiat.</em></p>
<h2>Vestibulum at velit</h2>
<p>Vivamus mattis nunc quis metus. Nunc lobortis. Vestibulum sed tellus. Duis auctor.</p>
</div>

Now, instead of markup cluttered with classes and a stylesheet with excessive code, we have a more streamlined version which is easier to follow and also easier to maintain.

In Closing

It is those circumstances when the style you wish to apply to an element is unique in nature when a specific class or id should be used. That way it will only make an effective appearance in the markup and in the stylesheet.

 Comments

8 Comments

  1. Fredrik Wärnsberg May 8th, 2006

    Small typo on the both examples, you open a <h2> but close it with a <h1>

    Nice writeup, but I do hope that most people have this figured out already :)

  2. Jon May 8th, 2006


    Author

    @Fredrik: Thanks for catching that — quite a dumb mistake just from rushing the code example. It’s been fixed now. Thanks again for catching it and thanks for posting.

  3. trovster May 8th, 2006

    I think for content an ID should be used, as there is usually only one content-container on the page, therefore ID is appropriate.

    Your last markup example doesn’t show the containing div.content :S

    I’m using classes now to markup Microformats

  4. Derek Punsalan May 8th, 2006

    Funny that you posted this article / tip today. Over the weekend I was scratching my head wondering why I was adding classes for <h2>, <h3>, and <p> elements when using the parent would suffice. Doing so not only prevents “degrading the stability” of your code, but also keeps your markup a little lighter.

  5. jammo May 8th, 2006

    aside from minor mistakes others have caught, i’ll focus on the lesson of todays article:
    great read again!
    i too used to give every container a classtag.
    now i dont.
    your method proves it is simple.

  6. Jon May 8th, 2006


    Author

    Yes, I’d like to take a second and officially apologize for letting the typos leak through. There’s really no excuse and it has taught me a lesson today to say the least.

    @trovster: A good time to bring up the Microformats link you included, it is something I recommend everyone take a look at, too.

    RE:your suggestion that an id be used to markup the content container, I’ve been in the practice of using id to identify elements that are only used once sitewide, as opposed to only once on a page. My reasoning for doing so is simply because the id would be used on each page, which is technically using the same id more than once.

    According to the W3C, an id can reference a specific element being used only once per document — so maybe my use is incorrect, and taking the definition a bit overboard.

    What do you think? What do others think?

    @Derek: Yeah, I think it is something every developer realizes at one point or another when refining their practice.

    @jammo: I’m glad you found it useful. Just a short one this week as I was extremely short on time, resulting in the minor mistakes you referred to — it will _not_ happen again.

  7. P.J. Onori May 8th, 2006

    Very good point. The less code you need to write to accomplish something, the better. This is pretty much universal for all programming.

    The less classes, results in less code, which (usually) makes it less complicated, which allows you to accomplish more, which allows you to leave work eariler, which allows you to have more time for hobbies, which makes your life happier.

    See, the less classes you write makes your life happier! Why wouldn’t you head Jon’s advice? ;)

  8. Pedro Rogério May 9th, 2006

    Until at last I obtained to understand this!