Modifier Classes

There is no limitation to extend your type classes with individual state, size and position modifier. Proper handling of context and type should prevent the need of adjoining classes.

Syntax

State related syntax:

.{type}-{state}
.{type}-{context}-{state}

Size related syntax:

.{type}-{size}
.{type}-{context}-{size}

Position related syntax:

.{type}-{position}
.{type}-{context}-{position}

Overview

SuffixTagExample
-active*.item-active
-idle*.item-idle
-hover*.item-hover
-touch*.item-touch
-small*.item-small
-medium*.item-medium
-large*.item-large
-first*.item-first
-second*.item-second
-third*.item-third
-last*.item-last
-odd*.item-odd
-even*.item-even
Edit on GitHub

Functional Classes

Functional classes using pure CSS are marked with the is, no, has and fn prefix. JavaScript enhanced and therefore reusable classes on the other hand can be identified by the js prefix. Each of them should never have styles for painting.

Syntax

Pure CSS related syntax:

.is-{state}
.has-{context}
.no-{feature}
.fn-{action}

JavaScript related syntax:

.js-{action}
.js-{context}

Overview

PrefixTagExample
is-*.is-active
has-*.has-tooltip
no-*.no-webgl
fn-*.fn-clearfix
js-*.js-click
Edit on GitHub

Exceptions

There are exceptions that are not following the specifications.

Syntax

.wrapper
.wrapper-{name}
.wrapper-{context}
.wrapper-{component}
.wrapper-{type}

Overview

PrefixTagExample
wrapper-*.wrapper-body
Edit on GitHub