About

The class attribute is a global attribute (ie Every HTML element may have a class attribute specified) that permits to (select|categorize) elements.

Assigning classes to an element affects:

Value

The value is a set of space-separated tokens called name representing the various classes that the element belongs to. 

<div class='firstclass secondclass'/>

Name

A name is any string of one or more characters, none of which are space characters.

Authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

  • Keep classes lowercase and use dashes (not underscores or camelCase). Dashes serve as natural breaks in related class (e.g., .btn and .btn-danger).
  • Avoid excessive and arbitrary shorthand notation. .btn is useful for button, but .s doesn't mean anything.
  • Keep classes as short and succinct as possible.
  • Use meaningful names; use structural or purposeful names over presentational.
  • Prefix classes based on the closest parent or base class.
  • Use .js-* classes to denote behavior (as opposed to style), but keep these classes out of your CSS.

Management

Add / Delete / Modify (DOM Operations)

To manipulate the class attribute with script, see DOM - Class attribute

Join

Css: If a class is not present

Example with the logical pseudo-element: if the class fade is present but not the class show, the opacity will be set a 0. 

.fade:not(.show) {
    opacity: 0;
}

Library

  • CLSx to create class name conditionally

Documentation / Reference