バリアント（Variants）

コンポーネントとエレメントは、バリアントを含むことが出来ます.

.search-formへ付与されるバリアント.-prefixedと.-compact

バリアントの命名

バリアント用のクラス名にはダッシュ - プリフィックスが付きます.

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

エレメントのバリアント

エレメントもバリアントを持つことが出来ます.

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

ダッシュプリフィックス

ダッシュ(-)は以下のような理由でバリアントのための良いプリフィックスです.

• エレメントに対する曖昧さを防げる

• CSSクラスが_ もしくは-のみで始まる

• ダッシュはアンダースコアよりタイプするのが簡単

• UNIXのコマンドにおけるオプションに似ている(gcc -O2 -Wall -emit-last)