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までお声がけください(ゝω・)