Variant / State
SpiraCSS splits traditional Modifiers into Variant and State.
Role breakdown
- Structure (Block / Element): expressed with classes
- Variant: static appearance differences (size/tone/layout)
- State: dynamic toggles (open/closed/loading/selected)
Important: whether JS toggles it is not a classification criterion. Decide by meaning.
Expression modes
Configure in spiracss.config.js.
Data mode (default)
| Type | Purpose | HTML | SCSS |
|---|---|---|---|
| Variant | visual variations | data-variant="primary" | &[data-variant="primary"] |
| State | interaction state | data-state="active" | &[data-state="active"] |
| ARIA | accessibility state | aria-expanded="true" | &[aria-expanded="true"] |
Placement rules:
data-variant→ base structure sectiondata-state/aria-*→ —interaction section- If state changes appearance, implement on the State side
Class mode
| Type | Naming rule | Examples |
|---|---|---|
| Modifier | prefix - (kebab-case, 1–2 words) | .-primary, .-active |
In class mode, you cannot distinguish Variant from State by class name alone. Use the same placement criteria as data mode.
Data attribute naming
| Type | Default attribute | Value format | Example |
|---|---|---|---|
| Variant | data-variant | kebab-case, 1–2 words | data-variant="primary-dark" |
| State | data-state | kebab-case, 1–2 words | data-state="loading" |
You can split Variant into multiple attributes (e.g. data-variant="primary" + data-size="large").