最近をRSCSSを使用することがあったため、感想を書きます。

RSCSSとは

RSCSS（Reasonable System for CSS Stylesheet Structure）は、合理的かつシンプルなCSS設計を実現するためのコーディング方法論です。Rico Sta. Cruz氏によって提案され、保守性を高めることを目的としています。

構成要素

RSCSSの主な構要素は下記になっています。

Components
Elements
Variants
Layouts
Helpers

Components

UIの各部分を個別のコンポーネントとして考えて設計します。

命名規則
コンポーネントの名前は少なくとも2つの単語を使い、ケバブケースで記述します。

記述例

× form
⚪︎ search-form

Elements

エレメントはコンポーネントの中にある要素です。

命名規則
エレメント要素は1単語のクラスになります。

記述例

.search-form {
  > .field { /* ... */ }
  > .action { /* ... */ }
}

もし、2つ以上の単語が必要な場合は、ダッシュやアンダースコアを使用せず続けて書きます。

記述例

.profile-box {
  > .firstname { /* ... */ }
  > .lastname { /* ... */ }
  > .avatar { /* ... */ }
}

Variants

ひとつのコンポーネントに対して他のバリエーションがある場合は、バリアントを使用します。

命名規則
バリアントのクラス名の先頭にはダッシュ（-）が付きます。

記述例

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

Layouts

コンポーネントのポジションや幅などレイアウトに関わる指定をします。
コンポーネントは、再利用できるように作られるので、コンポーネントに下記ようなのプロパティを入れるのは避けましょう。

・positioning (position, top, left, right, bottom)
・margins (margin)
・dimensions (width, height)

記述例

.article-card {
  & { /* ... */ }
  > .image { /* ... */ }
  > .title { /* ... */ }
  > .category { /* ... */ }
}

Helpers

オーバーライドするための汎用クラスです。別のファイルに入れ、アンダースコア（_）で始まる名前を付けます。!importantでタグ付けするため、使用する際は要検討ください。

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

RSCSSを書いてみての感想

公式は英語ドキュメントですが、Google翻訳（DeepLなどでも）でわかりやすかったです。
CSSの命名を考えるのに悩んでしまうときがあるため、簡単にCSSが書けるためよかったです。
レイアウトを親要素から指定しないといけないため、徹底するのが大変な印象です。
他の設計記法より理解はしやすかったですが、まだまだ完全にものにできていないため、習得がんばりたいです。

その他、詳細については公式ドキュメントを参照ください。

参考

https://rstacruz.github.io/rscss/
https://zenn.dev/mt5/articles/fb5189ecb874e2
https://rfs.jp/sb/html-css/html-css-guide/rscss.html
https://qiita.com/y___k/items/bedd6c2fdc61b4364aa2
https://tomcky.hatenadiary.jp/entry/2018/03/19/000139