CSSリファクタリングをした話

こんにちは。Supership株式会社でデザイナーをしているエリィと言います。
今回も前回と同じく、プロダクト開発G内の勉強会で発表した資料の再編になります。

DIGROWについて

私が担当しているDIGROWという転職サービスがあります。

このサービスでは、単に求職者が転職活動を行うだけでなく、SNSアカウントを使って求職者にアドバイスする機能や、転職エージェントを「食べログ」のように評価する機能なんかがあります。ぜひ利用してみてください。
あと、チームメンバーが面白いnoteを投稿しているので転職活動中の方もそうでない方も読んでみてください。（宣伝）

「#DIGROW」の新着タグ記事一覧｜note ——つくる、つながる、とどける。

今回は

DIGROWのエージェント管理画面という、転職エージェントさんが利用する画面のCSSをリファクタした話です。（特定の会員だけが利用できる管理画面なのでキャプチャは自主規制です）

Scoped CSS増えすぎ問題

DIGROWではVue.jsで開発を行っています。Vue.jsではScoped CSSを使ってCSSを簡単に書くことができます。設計などせずにそのページで使いたいCSSを書き放題！

・・・ところがこのScoped CSSでいろんな人がページごとに色々なCSSを書いていることにより、管理ができなくなっていました。

また、各ページにCSSを書いているので新しい機能を追加するたびに1からCSSを書いており、デザインにも時間がかかっていました。

CSSフレームワークを利用する

今回問題になっているのは管理画面なので、上記の課題をCSSフレームワークを導入することにより解決することにしました。

色々調べた結果、すでに稼働しているサービスであり、リファクタができるのが私（デザイナー）だけだったので、コードはいじらずhtmlとCSSのみを書き換えることにしました。そこで・・・

今回は、Bulmaというフレームワークを利用することにしました。ドラゴンボールに出てくるブルマから命名されているそうです（カプセル化されてる➡︎カプセルコーポレーション➡︎ブルマ)

BulmaはCSSのみのフレームワークなので、オーバーレイやポップアップなどJSが必要な部分はVueで書くことにしました。

色々な人がCSSを書いているので、いろんなボタンが存在していました。例えば角丸のボタン、グラデーションボタンなど。この辺りを意味的な考えでまとめていきました。

例えば送信の場合は紫色の角丸のボタン、キャンセルの場合はアウトラインが紫のボタン、などです。

↑のようなことが起こっていましたが、エレメントの意味を再定義して、フレームワークを入れることにより1つのstyle当てるだけで解決できるようになりました

終わりに

CSSが整理されたことによりデザイナーがいなくてもBulmaのスタイルガイドを見てエンジニアでも画面が作れるようになりました。
見た目が良くなったのでクライアントからも高評価をいただくことができました。

おまけ

CSS自体のパフォーマンスを良くすることについても調べました。基本ですが大事だなと感じました。

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響

参考

参考にさせていただきました。

最初からCSSをぎちぎちに設計するのは難しいので、ある程度サービスがスケールしたらリファクタリングするのがいいのかなと個人的に思いました。

終わり。