👓
RSCSS 日本語訳
  • Introduction
  • コンポーネント（Components）
    • コンポーネント について
    • エレメント（Elements）
    • バリアント（Variants）
    • ネストされたコンポーネント (Nested Components)
    • レイアウト（Layouts）
    • ヘルパー（Helpers）
  • 構造（Structure）
    • CSS Structure
  • 付記
    • 落とし穴
    • 懸念点
    • リソース
  • 要約
  • 外部リソース
    • 翻訳
Powered by GitBook
On this page
  • バリアントの命名
  • エレメントのバリアント
  • ダッシュプリフィックス

Was this helpful?

  1. コンポーネント（Components）

バリアント（Variants）

Previousエレメント（Elements）Nextネストされたコンポーネント (Nested Components)

Last updated 5 years ago

Was this helpful?

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

バリアントの命名

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

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

エレメントのバリアント

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

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

ダッシュプリフィックス

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

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

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

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

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

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