CSS コーディング

RSCSSの使い方と実際に使われているサイト一例

RSCSSについて解説します

RSCSSとはCSS設計手法の一つ

RSCSSとはどのようにCSSを書くかを定めた、CSS設計手法の一つです。ルールがシンプルなので比較的導入しやすい手法です。

SMACSS,OOCSS,BEMなどのようなものです。

RSCSSの使い方

RSCSSには主に以下の概念があります。

  • Components(コンポーネント)
  • Elements(エレメンツ)
  • Variants(バリアント)

Components(コンポーネント)

Components(コンポーネント)

Components(コンポーネント)はパーツの一番大枠の要素

Components(コンポーネント)は単語ふたつをハイフンで連結します。

Elements(エレメンツ)

Elements(エレメンツ)

Elements(エレメンツ)はコンポーネントの中の要素

Elements(エレメンツ)は単語ひとつで構成されます。
(下の「.field」「.action」がエレメンツ)

Elements(エレメンツ)で単語ふたつ以上を使いたい場合は記号を使わず連結します。

Variants(バリアント)

Variants(バリアント)

Variants(バリアント)は汎用的に使われる要素とは一部異なる場合に使います。
(BEMでいうmodifierのようなもの)

Variants(バリアント)の前にはハイフンが付きます。

コンポーネントやエレメンツにVariants(バリアント)が付く場合があります。

RSCSSのその他ルール

RSCSSの細かいルールについて説明します。

タグにCSSを当てず、できる限りクラスに当てる

タグ自体にCSSを当てることは問題ありませんが、パフォーマンスが低下する可能性があります。

コンポーネントをネスト(入れ子)してCSSを記述しない

下記のHTMLがあったとして・・

以下は.area-headerの中に.item-boxを記述してしまっているがこれは基本的にNG。

代わりに下記のように、ネストされたコンポーネントにバリアントクラスを追加します。それをコンポーネントから参照します。.item-boxにバリアントとして.-highlightを追加する

プロパティの配置

以下のプロパティの配置を避ける

  • ポジショニング系(position、top、left、right、bottom)
  • フロート系(float、clear)
  • マージン系(margin)
  • 寸法系(width、height)※ロゴなど幅高さが固定されているものは例外

これらを定義したい場合、親の位置を定義する必要があります。
以下の例では.area-listの入れ子として .area-card に width: 33.3%; float: left; を定義しています。

ヘルパー

値を上書きする汎用クラス(!importantがつくようなもの)は、helpersという一つのファイルにまとめ、アンダースコア先頭で記述します。(できる限り使わないことが推奨されています)

ファイル管理

コンポーネントごとに一つのファイルを用意します。

ネストは一回まで

ネストレベルは一つまで

RSCSSまとめ

RSCSSは命名規則や使用方法がシンプルで導入しやすいですが、BEMなどと比べると利用者が少なく情報が少ないです。

実際にRSCSSが使われているサイトを見ると参考になるかと思います。

RSCSSを使っているサイト↓
https://kouteisan.com
https://obscuredetour.github.io/simply-nav

また、この記事は下記を参考に書いたものです。英語サイトですが以下Google翻訳などで読んでみてください。このサイト自体もRSCSSで作られています。
https://rscss.io/index.html

スポンサーリンク

-CSS, コーディング

© 2020 まめしばweb Powered by AFFINGER5