UX Design and Development course

Semantic vs. presentational classes

As I was learning to style web pages through CSS (a while back), I went through a lot of books and articles in order to learn the best practices. Writing semantic HTML and CSS was on top of the list of best practices. However the recommendations for best practices varied. Some recommend strict adherence to semantic nomenclature yet some see the benefits of a mixture of semantic and presentational classes. Before we dive into the semantics of these arguments, lets chat a bit about what is meant by semantic and presentational classes.

Semantic Classes

The definition of Semantic classes can vary among different developers. Its true definition is:

  • of or relating to meaning in language
  • of or relating to semantics

Here are what some people in the CSS and development community discuss Semantic classes:

"Class names need to represent the object structure you are defining, not the specific visual look and feel of this particular instance."

"I'd describe semantics as it relates to HTML as tags, classes, IDs, and attributes describing but not specifying the content they enclose."

"A semantic CSS selector should reflect the intended structure or meaning of the element it is applied to."

"Semantics concerns itself with elements and not the names assigned to them. Using the correct element for the correct job is as far as semantics goes. Standards concerning naming of those elements is all about sensibility."

When it comes to writing semantic code, not only do opinions differ, but implementation is somewhat subjective and slightly elusive. Some follow a strict adherence to semantic naming that starts from the HTML tags and extends into the selector naming. This is an area where developers are opinionated. What makes it harder is that there is no framework or guideline that can be used to point us in the right direction.

We know that we stand on murky ground, so let us concentrate on what we know that is stable and can be reliable. As stated, a semantically named selector describes the object's structure and the content which will give us an idea of how the selector's rule can be applied.

Using .article-title for example, gives us an insight into the semantic nature of the style. On the other hand, a selector named .blue-header in not only un-semantic, but is clearly overly descriptive of the presentation. What happens when the design changes? Do you change the rules of .blue-header or do you create a new selector and then update the HTML elements that are referring to .blue-header?

A selector like .article-title is more descriptive of the content and will probably remain in the re-design of the site. This does beg the question, is it acceptable to ever use presentational styles?

Presentational Classes

Presentational classes are selector names that give us an insight into the presentation that is being applied. Some are like our previous example .blue-header, when applied will apply the style that is reserved headers type that has a blue color. These classes are considered un-semantic and not recommended for usage. Even in the W3C specification draft states the following:

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

An exception to this are examples of presentation styles used as helper or utility classes. For example, .pull-left, .is-hidden, .display-inline or .is-active. These types of classes are created to be used as modifiers where, for example, by applying the selector to an element that is to hidden from view, pulled to the left or is showing it's active state.

Semantic and Presentational Classes

When it comes to writing CSS, some fall under the camp of never using presentational classes and always being semantic vs. some that have the lax approach of not applying the semantic rules, sometimes to a fault.

The reasons behind the semantic class guideline are:

  • Separation of content from presentation
  • Search Engine Optimization
  • Sensibility

While I do not disagree with the semantic approach, I do however do not adhere to the strict "all semantic all the time" motto. The principle of "describe the nature of the content, rather than [...] presentation of the content" is the major guideline that should be followed. In that same line of ideology, we should use all the weapons available to us i.e. class, attributes, id, and tags to tell the story of content. For example, let's examine this bit of code for a blog site.

<div>
  <div id="article">
    <p class="bold-font 14px-large-font">
      How to write an un-semantic front end
    </p>
    <p class="regular-font">The content will go here</p>
    <div id="comments"></div>
  </div>
</div>

In comparison to the story teller's version.

<section id="main-content" role="main">
  <article class="blog-content">
    <h3>How to write an semantic front end</h3>
    <p>The content will go here</p>
    <section class="comments"></section>
  </article>
</section>

The latter example can let us know all the information about the different sections of site without exposing the individual presentational aspects of it. However I do not think that the total avoidance of presentational classes are necessary. The existence of some utility/presentation classes like .is-hidden, .pull-left, or .image-replacement is necessary only to be used in exceptional circumstances. However if you review your code and see too many of these utility classes, it is time to refactor your solution and pull them into the semantic frame of your stylesheet.