なぜRSCSS

マークアップ設計において主流であるBEMが以前から冗長だと感じていた。
新規案件で記述選定時にRSCSSを勧められてBEMと同じ様に簡単なルールで使用出来そうだった。
実際に案件で使ってみた課題など出て来たので、備忘録として残す。

RSCSSとは

シンプルなので、説明するより公式ドキュメントを見る方が早そうなので割愛。[https://rscss.io/]

使いはじめ

導入初期はBEMと基本的には同じ様に考える事が出来たのでサクサク進められました。
ただし、RSCSSではsassのextendを使用する所があるが、複数メンバーで使うと問題が発生しやすい印象があったので、NGにしました。

命名規則は最初にちゃんと決める

プログラミング言語全般で難しいのが命名規則。
正式なルール上、componentsは2ワードをハイフンで繋ぐ。
複数人でやる場合、ここをRSCSSのルールに沿っていくだけだと意味と単語が複数パターン出てきてしまい、結構カオスになる事がわかった。
最低限、出て来そうなパターンは単語を限定して使う様にルール付けないと危険。

ちなみにVariantsやelementも同じことが言えるが、ここはcssフレームワークから流用したら使い回しやすい。
個人的にはbulmaは名前が分かり易く使いやすかった。
ただし、cssフレームワークをそんなら使っちゃえとなるとカスタマイズ出来る様に考えていかないとRSCSSうんぬんの前に名前がぶつかったりして使いづらくなってしまう。

class名が適切じゃ無いとその後に大きな影響が出るので、参考程度に機能とかはフレームワークを参照して、影響が大きくなりそうなcomponentsはしっかりとルールを決めておいた方が良い。
案件専用のプレフィックスを付けるとか大事かもしれない。

入れ子はありなのか。

title, text {}
入れ子にしないとネストが深くなる事が多々発生してしまうので使った方が良さそう。
ただし、事前に入れ子が発生した時のscssの設計を考えて置かないとまとまってたり、バラついたりして崩壊していくので気をつける。

elementがどこに紐づいてるのか分からない

scssが大きくなると使い回す事が多い、.titleや.textなどcomponentがどこに紐づいているのか都度確認しなければいけない程、分かりづらくなる。
この辺りはBEMであれば発生しないので、弱点なのかもしれない。
コメントなどを付けて関連付けをするのが現状では解決策かなと思っているけど、もっと良い対策がありそう。

// これはどこの.titleと.text??
・・・ 
  > .title {
  }
  > .text{
  }
}
.media-wrap {
・・・
  // .media-wrap> こんな感じでコメントを入れる
  > .title {
  }
  > .text{
  }
}