Html - Correct use of markup tags ,CSS and OCSS

Question

I'm really interested in the correct way of writing markup, especially with the rollup of HTML5. And found that it's really hard to write markup that doesn't say anything about the looks of the content. And after reading up on object oriented CSS and the use of classes, it's definitely not easier. I do come from a programming world where variables and logical structure of code is key. So while trying to keep that in mind, here are some thoughts on this whole topic.

I tried several things, reusing classes, for example creating a set of classes for color palettes. Such as:

.color_pr1 {
      color: blue;
}

.color_pr2 {
      color: red;
}

And also quick classes such as:

.left {
          float:left;
}

.right {
          float:right;
}

.bold {
          font-weight:bold;
}

The old philosophy of "markup shouldn't dictate how content is displayed", classes like .left .right and .bold should be a big no-no. But they are reusable arent they? Reusable code is great! But, I found I end up with bloated markup that might look kinda like this:

<div class="color_pr1 bold right">
    <p>Lorem ipsum</p>
</div>

Or I could have written the markup like this:

<div clas="right">
  <p class="color_pr1 bold">Lorem ipsum</p>
</div>

In any way, I think it's clutter. Why not just give the parent div an ID or class and write specific subclasses within that ID/class in CSS?

Consistency must be key here, and without it, you end up with markup bloat that just end up damaging the workflow of the project alltogether.

So normally I'd just create a set of color palettes as variables in SASS. A basic set of sizes and assign h1 to h6 their default values. Then if I'd need to mix these up a bit, I'd either assign the tags with a new color class, or create CSS that looks like this:

#somediv, .someclass {
  h1 {
     color: $color_pr1;
  }
}

Isn't this way better than ending up with markup that's got a huge amount of classes tied to it? What about this scenario, you have a layout that kinda looks like this:

15.03.2013

Some image

Music news

The Beatles reunited

Lorem ipsum dolor sit amet

In this example, this is the exact markup:

<h3>15.03.2013</h3>
<img>Some image</img>
<h5><strong>Music news</strong></h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>

First of all, when is it appropriate to use <h> tags?The first h3 tag is used on the date. Is that really a heading? What about the h5 tag? It's not really a heading is it? It defines the category the article is published under. Should I use <strong> tag? Not really, it's nothing important about it, markup wise. It's just Bold text bacause it's designed like that.

Would this be a better approach?

<section id="news_articles">
  <article>
   <h3>15.03.2013</h3>
   <img>Some image</img>
   <h5>Music news</h5>
   <h1>The Beatles reunited</h1>
   <p>Lorem ipsum dolor sit amet</p>
  </article>
</section>

And write CSS that looks more like this?

*/ default values */ h1 { font-size: 16px; }

h3 {
  font-size: 12px;
}

h5 {
  font-size: 10px;
}

*/ specific ID subclasses */

#news_articles {
  h3 {
    font-weight: bold;
  }
}

So it's really down to the balancing of writing simple markup, as well as reusing CSS code that's my main issue here. What are your thoughts on this?

Answer 1

I'm not sure if this answer will be satisfactory to you, but while there certainly are plenty of best practices, it usually comes down to case-by-case scenarios.

As you say youself, reusability is great, it really is. "Left", "Right", "Bold" are among the lesser evil kind of presentational class names because they're easy to understand and easy to remember and therefore re-use.

However the entire point of using class names describing the element's function rather than looks is for the markup to always make sense even when the site is running under a, for instance, responsive layout, or even an entire design overhaul. If a new design has blockquotes floated to the left rather than to the right, you'd either have to dig through all of your pages/templates/databases to remove the left/right class names or you'd find yourself in either of these three scenarios:

Accept having CSS like

.left { float: right }

or

.general-class blockquote { float: left !important; }

or end up with unused CSS-selectors written in the markup and/or the stylesheets.

It's obviously not the end of the world, but hey, every bit helps if you want to create semantically correct, easy to use projects or snippets. In smaller projects you may find it's so easy to change the markup manually, in those cases it's even less of a deal.

As for your other questions: this is where it really comes down to case-by-case scenarios. While writing markup, keep asking yourself what purpose everything fills. "Is this percieved as a header?", "Is this used for navigation?", "Is this a different section of the article (or a different article on the section)?".

If the answer to such a question is "Yes", then you probably won't go wrong with sectioning your markup as such.

For more detailed information of when a HTML element may be appropriate, refer to: http://dev.w3.org/html5/html-author/

And a quick note on CSS-selectors; always strive towards writing as short, efficient selectors as possible. Don't be too specific in your general selectors, doing a global:

h2 { text-transform: uppercase; }

And then only have uppercase h2s on one part of your site but dozens of other h2s without it makes no sense, since you'd have to reset the text-transform whenever you create a new section.

But it also makes no sense to be too loose with your selectors; if you find yourself writing class names on many of your content elements (headers, images, paragraphs for instance) you may want to consider writing more efficient markup/selectors.