Sass in the Real World: book 1 of 4

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?