Scoped CSSと相性の良いCSS設計のRSCSS

CSSはいつも悩むのですが、最近はVueやNuxtと使うことが多いので、Scoped CSSばかりでやることが多いです。
Scoped CSSといえど、componentが増えればある程度統一した設計がほしいなと思って探していたところ

rscssと出会いました。

RSCSSとは

CSSと設計と言っても比較的ルールも少なく、保守性の高いCSSを構築するためのアイディアセットです。

週度としては、下記のようにわかれています。

  • Components
    • Elements
    • Variants
  • Layout
  • Helpers

Scoped CSSと相性の良い理由

RSCSSはルールが少なく拡張性が高いのが特長です。
そのため、ネストされたセレクタへの影響が運用していると出てきやすいのが予想されます。

このあたりのネストへの影響をScoped CSSが管理してくれるのでデメリットになりません。

Atomic DesignとRSCSSの組み合わせで考えていること

nuxt.jsなどで作る際は自分はAtomic Designの設計を採用して作っています。
これはエンジニアが主に実装するような部分もcomponentに分ける必要があるため、CSS
設計だけでは不足するからです。

RSCSSでは主に「Atom」と「Molecules」の中で使われます。

粒度として下記の用な感じで考えています。()の中はRSCSSの設計です

  • Atom(Elements)
    • Variants
  • Molecules( Components)
    • (Elements)
    • (Layout)

改善を考えているところ

よくAtomsのAtoms見たいなものが欲しくなるので、このあたりをどうするかを決めかねています。

今の所は下記の設計のどちらかで考えています。

  • 細かい要素はSCSSのextendで代用する。
  • Variants以外での拡張性を持たせる命名規則を作る(例 type-*)

最後に

これまで、CSS設計に関してはFLOCSS→SMACSS→APB CSSとやってきたのですが、どれも長期間の保守とチームでの運用がなんらか難しくなってしまった背景があります。

Scoped CSSである程度雑でも動くものはできていたのでモヤモヤしてたけど RSCSSで一歩前進できそうな気はしています。

もし、「うちはこうしてるよ」みたいなのがあれば情報交換できると嬉しいので、maki_sakiまでお声がけください(ゝω・)

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール