最近を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