SMACSS

States

A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state. [Modules and states] differ in two key ways:

  1. State styles can apply to layout and/or module styles; and

  2. State styles indicate a JavaScript dependency.

  3. SMACSS, Jonathan Snook

State styles typically refer to styles that only exist on an element for a short period time, for example: styles for invalid form fields would go in validations.scss.