Open3
CSS設計手法、RSCSSとは?
概要
Think in components, named with 2 words (.screenshot-image)
Components have elements, named with 1 word (.blog-post > .title)
Name variants with a dash prefix (.shop-banner.-with-icon)
Components can nest
Remember you can extend to make things simple
出典:Summary(公式)
以下意訳
- 2単語でコンポーネントを命名する(
.screenshot-image
) - コンポーネントは要素を持つ
- 要素は1単語で命名する(
.blog-post > .title
)
- 要素は1単語で命名する(
- 変数には接頭辞としてダッシュ(
-
)をつける(.shop-banner.-with-icon
) - コンポーネントは入れ子にできる。
- 物事をシンプルにするために拡張することができることを忘れないでね。
構成要素の概念
- Components:一番大枠の要素
- Elements:Componentsの中の要素
- Variants:構成要素(Components, Elements)のバリエーションパターン(BEMで言うmodifier。別バージョン的なイメージ)