既存の CSS 設計やスタイルガイドの改善フロー

こんにちは、Gaji-Labo 横田です。受託で HTML+CSS コンポーネント・JavaScript・Rails view等フロントエンド開発をお手伝いしています。

今回は、既存プロジェクトで HTML+CSS の技術負債を改善したい時に Gaji-Labo が行っている最初のステップを紹介します。

こんなお悩みありませんか？

見た目上のデザインを大きく変えたりフルリニューアルをせずに、スタイルガイドや CSS の再設計を行い、運用上のボトルネックや負債になっている課題を改善していきたい。こんなお悩みに対し、Gaji-Labo ではまず既存の CSS 設計とドキュメント類を理解するところから始めています。

ドキュメントの把握とヒアリング

スタイルガイドやコンポーネント一覧・コーディングルール、規約、デザインなど、CSS 設計に関連するドキュメント類があれば、全容を把握します。

この時、ドキュメント類が作られた経緯や背景、主な使用場面、運用メンバーのスキルセット、デザイン意図、今後の見通しなどもヒアリングさせていただくことで、すでに見えている課題や要求を整理するだけでなく、見えていなかった課題や要求も掘り起こして可視化することを大事にしています。

CSS の調査

CSS の調査では以下のような項目を重点的に調査し、課題をコードベースに落とし込めるようにします。基本的なものこそ、細かく丁寧に調査します。

• CSS ディレクトリ構造
• import している CSS ファイルの構造
• ベースとなるスタイル
• ヘルパー/ユーティリティ class の指定
• class/id の命名ルール
• class/id の付与ルール
• ファイル名の命名ルール
• 1ファイル内の CSS の粒度
• 変数化している値
• mixin や extend の指定
• コンポーネントの上書きのルール
• ページ固有のスタイリングルール

HTML の調査

運用の中で、スタイルガイドやコンポーネントの使われ方の実態を洗い出します。
class 名でコード検索し、実際のページで該当箇所を目視確認しながら、コードと見た目両方を把握できるようにしていきます。スタイルガイドで定義されているコンポーネントの想定外な使われ方やバリエーションやページ固有のスタイルもまとめます。

課題の例

これらの調査結果を元に、負債となっている箇所や課題を小さな粒度で浮き彫りにできます。一例を挙げてみます。

• ヘルパーやユーティリティクラスが多用されている
• 同じ見た目や UI でも、ページやカテゴリごとに CSS の指定がバラバラで再利用できない
• 余白の持たせ方がバラバラで規則性や堅牢性がない
• コンポーネント実装と実際に使いたい見た目のバリエーションに乖離があり、上書きや継承が多数発生して詳細度が深くなっている
• コンポーネントがコピペで使用しづらい
• 命名ルールが統一されていない
• 指定している変数や mixin が使われていない
• CSS が複雑になりすぎて容量が増大している
• 同じ機能でもページやカテゴリごとにデザインが異なっていたので統一したい
• 文言の表記揺れに気づいたなど

まとめ

運用方法のヒアリングや実際のコードを小さな粒度で調査することで、課題をより具体的なコードベースに落として可視化することができます。この中でクリティカルな課題を見つけ、どのようなステップで改善していけるのか探っていきます。次回はスタイルガイドの設計方針を決める流れを紹介したいと思います。

Gaji-Laboブログ内には、他にもチーム開発でのWebフロントエンドについて取り上げた記事があります。
チーム開発のために必要なコーディングルールやスタイルガイド、コンポーネントの設計方法など、実践をもとにしたリアルなWebフロントエンド知見に興味がある方におすすめの記事シリーズを「チーム開発でのWebフロントエンド」としてまとめていますので、あわせてお読みいただけるとうれしいです。