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

RSCSSとはCSS設計手法の一つ
RSCSSの使い方
RSCSSのその他ルール
RSCSSまとめ

RSCSSとはCSS設計手法の一つ

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

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

RSCSSの使い方

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

Components（コンポーネント）
Elements（エレメンツ）
Variants（バリアント）

Components（コンポーネント）

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

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

.login-form {
    /* ... */ 
}

.login-form {

/* ... */

}

Elements（エレメンツ）

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

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

.login-form {
    > .name { /* ... */ }
    > .password { /* ... */ }
}

.login-form {

> .name { /* ... */ }

> .password { /* ... */ }

}

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

.profile-area {
    > .firstname { /* ... */ }
    > .lastname { /* ... */ }
}

.profile-area {

> .firstname { /* ... */ }

> .lastname { /* ... */ }

}

Variants（バリアント）

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

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

.entry-button {
    &.-wide { /* ... */ }
    &.-min { /* ... */ }
    &.-active { /* ... */ }
}

.entry-button {

&.-wide { /* ... */ }

&.-min { /* ... */ }

&.-active { /* ... */ }

}

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

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

.shopping-card {

> .title { /* ... */ }

> .title.-large { /* ... */ }

}

RSCSSのその他ルール

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

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

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

.area-card {
    > h2 {} /* NG */
    > .title {} /* OK */
}

.area-card {

> h2 {} /* NG */

> .title {} /* OK */

}

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

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

<div class='area-link'>
    <div class='item-box'>
        ...
    </div>
    <h3 class='title'>...</h3>
    <p class='detail'>...</p>
</div>

...

</div>

</div>

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

.area-header {
    > .item-box > .up { /* ... */ }
}

.area-header {

> .item-box > .up { /* ... */ }

}

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

<div class='area-header'>
    <div class='item-box -highlight'>
        ...
    </div>
    ...
</div>

...

</div>

...

</div>

.item-box {
    &.-highlight > .up { /* ... */ }
}

.item-box {

&.-highlight > .up { /* ... */ }

}

プロパティの配置

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

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

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

.area-list {
    & {
        @include clearfix;
    }

    > .area-card {
        width: 50%;
        float: left;
    }
}

.area-card {
    & { /* ... */ }
    > .image { /* ... */ }
    > .title { /* ... */ }
}

.area-list {

& {

@include clearfix;

}

> .area-card {

width: 50%;

float: left;

}

.area-card {

& { /* ... */ }

> .image { /* ... */ }

> .title { /* ... */ }

}

ヘルパー

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

._unmargin { margin: 0 !important; }
._center { text-align: center !important; }
._float-left { float: left !important; }
._flort-right { float: right !important; }

._unmargin { margin: 0 !important; }

._center { text-align: center !important; }

._float-left { float: left !important; }

._flort-right { float: right !important; }

ファイル管理

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

/* css/components/search-form.scss */
.search-form {
  > .button { /* ... */ }
  > .field { /* ... */ }
  > .label { /* ... */ }

  // variants
  &.-small { /* ... */ }
  &.-wide { /* ... */ }
}

/* css/components/search-form.scss */

.search-form {

> .button { /* ... */ }

> .field { /* ... */ }

> .label { /* ... */ }

// variants

&.-small { /* ... */ }

&.-wide { /* ... */ }

}

ネストは一回まで

ネストレベルは一つまで

/* ネストの中にさらにネストしてしまっている */
.image-wrap {
  > .desc {
    /* ... */

    > .icon {
      /* ... */
    }
  }
}

/* ネストはひとつが望ましい*/
.image-wrap {
  > .desc { /* ... */ }
  > .desc > .icon { /* ... */ }
}

/* ネストの中にさらにネストしてしまっている */

.image-wrap {

> .desc {

/* ... */

> .icon {

/* ... */

}

/* ネストはひとつが望ましい*/

.image-wrap {

> .desc { /* ... */ }

> .desc > .icon { /* ... */ }

}

RSCSSまとめ

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

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

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

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