Naming Conventions
In SpiraCSS, clearly separate structure (Block / Element) from Variant / State.
Block / Element / Utility
| Type | Naming rule | Examples |
|---|---|---|
| Block | kebab-case, two words (default) | .hero-container, .feature-list |
| Element | exactly one word | .title, .body |
| Utility | u- prefix | .u-hidden, .u-sr-only |
Terminology: a “word” refers to a naming segment. In kebab-case (the default), segments are hyphen-separated. For example, hero-container has two words.
- A Block represents a UI component or section (a meaningful unit)
- An Element is meaningful only within the Block (do not use it outside)
- A Utility is a single-purpose helper class, not part of structure
Note: An Element is always one word. Even if elementCase is set to camel or pascal, do not use multi-word names.
Prioritize clarity and readability over brevity.