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.