SUIT CSS Naming Conventions

Enjoy this cheat sheet at its fullest within Dash, the macOS documentation browser.

Naming conventions

Utilities

u-[sm-|md-|lg-]<utilityName>

Components

[<namespace>-]<ComponentName>[-descendentName][--modifierName]

States

ComponentName.is-<stateOfComponent>

Variables

--ComponentName[-descendant|--modifier][-onState]-(cssProperty|variableName)

Theme Variables

--variableName