Sass in the Real World: book 1 of 4

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.