Variants

Components may have variants. Elements may have variants, too.


Naming variants

Classnames for variants will be prefixed by a dash (-).

.like-button {
  &.-wide { /* ... */ }
  &.-short { /* ... */ }
  &.-disabled { /* ... */ }
}

Element variants

Elements may also have variants.

.shopping-card {
  > .title { /* ... */ }
  > .title.-small { /* ... */ }
}

Dash prefixes

A dash is the preferred prefix for a variant because:

  • It prevents ambiguity with elements.
  • A CSS class name can only start with a letter, _ or -.
  • A dash is easier to type than an underscore.
  • It kind of resembles switches in UNIX commands (gcc -O2 -Wall -emit-last).

How do you deal with complex elements? Nest them. Continue →